 Hey, what is going on everybody? My name is Raddy and you're watching my channel Raddy The Brand. Today we're going to explore Wash messages in Node.js. Wash messages are used to display server operations such as success or error messages. An example would be a registration form. Once a registration form has been submitted, you might want to tell the user whether the registration was successful or there was an error. If you found this video informative, hit the like button, consider subscribing to my channel for more content like this. And if you have any suggestions or questions, please comment below. And last thing, the link to the written article and the github will be in the description below. And now let's jump to the computer and get started. Hello and welcome everybody. And let's get started with this tutorial. As you can see, I've already created a project folder called Node.js, EJS, Wash messages. And inside this folder, I've got some github files. And this is because I'm going to be uploading this on github. So I can share it with you later on. But ignore those files. All you need to do is create a project folder. And once you've done, we need to CD to this project folder in PowerShell command line or whatever you have available to do this on Windows. I can actually do left shift right click open PowerShell window here. And this is basically going to CD to the project folder. Now some of you asked me, how do you CD to the project folder manually? And literally, you can just use the CD command. So CD. And if you want to go backwards, you just press two dots. And as you can see, this went backwards once to this photo here, Github repo. And if I do CD dot dot again, it goes to my D drive. The same goes to going forward, you can just do CD and then the the folder name. Unfortunately, this one has space between. So I'm going to have to do it in single code so I can do Github and then space repo in single codes and press center. And as you can see, we're inside here. Obviously, we need to go back to Node.js, EJS plus messages. So let's do that CD and then node.js, EJS flash and then messages press center. And as you can see, we're now in our project folder. Now to initialize a new project, we can do MPM in it. And we can use the Y flag to skip all of the questions and save us a little bit of time. So if you do Y minus Y, this will create a new project. It will do everything as default, the name, version, description and so on and create this package.json file for us. Now let's install the dependencies that we need for this project and then we can start. Now let's install the dependencies and then we can open this in our favorite code editor and continue the dependencies that we need for this project. Express, express session, cookie, parser, connect flash and EJS. Let's start by installing all of them together. So we can do MPM, I for short points to and then we can do express, express session, express, sorry, cookie, parser, space, connect, flash. And the last one is EJS for rendering engine. Press enter. This should take a couple of seconds. And now we should be good to go. Let's open this project in our favorite code editor. And for me, this is VGTD code and I can just do code dot and this will open VGTD code for me. As you can see, I have the project here on the left side, but you can always go to file, open folder and just navigate to your project folder. If you press on the package dot JSON file, you should see that we have all of the dependencies installed here, connect flash, cookie, parser, EJS, express and express session. And note that the versions will change if you're watching this in the future. So let's close this and let's start by creating all application. To do this, I'm going to create a new file called app dot JS. We need to start by requiring all the dependencies that we just installed. So let's start by doing this at the top of file. To do this, let's start with express. So let's do const express equals require and then express like so. Close this. Then we const session equals require and then we require express sessions. Then const cookie parser equals require and then we require the cookie parser. And the last one we need is const flash. And then we require the connect connect flash like so. Alright, the first thing that we need to do is initialize a new application with express. And to do this, we can just do in it, I need to express up and to do this, we can do const app equals equals express. And then we close. That's it. Now we need to set now we need to create a port number for or up to listen to and to do this, let's just do port. Port number meaning it is self explanatory, but let's do anyway. So let's do const port. And this will be equals the process dot env dot port or 5000. Now what's happening here is if you wish to publish your project, you might want to use the environment port number, which is already set by the hosting company usually, or if there isn't one available, you just use the port 5000, or you can just put whatever you wish, as long as this port is not in use. So that's absolutely fine. Because we're using a local host is going to be using the port number of 5000. Now the next thing that we need to do is set up a few middlewares. And the first one is the first one will be the express body parser. And the reason that we want to use express body parser is because we want to pass the incoming request bodies from or form. So when we submit our form, we want to pass the data in adjacent format. And then we can use that data to store in or flash message. So let's do adjacent data. And to do this, we have two options. So the first option is app dot use. And inside here, we can do express URL encoded. And we just need to pass one option in here. And this is extended to true, like so. And oops, and we need to close this. Now the next option will be app dot use. And then this will be express dot JSON. If you hover over, you will see that returns middleware that only passes JSON and only looks at request where content type header matches the type option. So that's pretty helpful. But you can hover over those things and read a little bit more about them. Yeah, this is basically going to help us pass the data. Now the next thing that we need to set is the cookie parser sessions and flash set sessions and flash. Let's start with the cookie parser. So we can do app dot use. This is a middleware again. So cookie parser and the cookie parser will have one option. And this is the secret. Now the secret is basically a string or array use for signing cookies. Maybe we can put secret string for cookies. That would do. And then we can close this. And now we actually done with a cookie parser. And the next thing that we need to do is the sessions. So for the session, it will be very similar. So for the sessions, it will be very similar. We just need to do app dot use. And then inside here, we can just do session. And we need to pass a couple of options, which I will talk about now. So open brackets, then open curly brackets, close curly brackets and close. Okay, inside here is where we're going to be adding the options. And to be honest, most of them are self-explanatory. The first one is the secret. So let's put the secret in here. We can do a secret string for session. Maybe the next one will be the cookie expiry. So cookie. And then we can pass an option here and we can pass max age. Maybe we can put the max age of this session cookie to be 60,000, which is 60 seconds. And then the next option is resave. And this will be set to true. And resave basically forces the sessions to be saved back to the session store, even if the session was never modified during the request. If you want to read more about those options, everything will be linked in the description below. But I'm just giving you a very short description of each. And let's continue now. And the next option that we need is save until initialized. And this just needs to be set to true again. And this basically forces a session that is initialized to be saved to the store. Again, please read a little bit more about those options on my blog. I will link everything. Let's just continue and do app.use. And the last thing that we need to do is flash like so. And that's it. We should be good with the cookie parser sessions and flash. The next thing that we need to do is set our view engine, which we installed earlier. And that is EJS. Now you can use whatever you wish. In fact, you don't even need to use one. But I know that a lot of you might want to use one. Try I'm doing it. And the most popular one is EJS. And you also have Perk, Handlebars and so on. But let's use EJS for this project. So we can do, all right, let's say view, view engine and EJS. And let's do app.set. And then inside here, we put view engine comma and we set the view engine name in here, which is EJS for me. That's it. We should be good to go. And for this project, we're going to create two routes. And then I'll come back to them in a second as well. The first route will be a get route. So when we visit our home page, we want to hit this route and maybe just put slash and then this will be home page like so. And to do this, we can do app.get. And then we're going to get the home page, which is just going to be slash. If it's, for example, if it's the about page, you might want to do about and so on. And then we just need to put a, and then inside here, this is going to be a function. We're just going to get the request and the response like so. Open curly brackets in here and close them, close this. And inside here, we just want to render a page. So we can do res. We have an error here. We need a comma. And inside here, we just need a res.render. If you want to render a page and the page that I want to render is going to be in a folder called pages and then index. This will be called index.ejs, but we don't have to specify the view engine in here anymore as we have it in here, which is good. So we can just put index and I'm going to create this file in a second. That's pretty much it in here. We'll come back to it in a second. As I said about the flash pages, and we need one more route. And this route will be on post. So let's do post. And this again will be slash. So it will be the home page. But we're just when we post a form, we want to hit this route. But instead of rendering this time, I want to redirect redirect. And when I want to redirect to the home page again, like so. And that's all looking good. And the last thing that we need to do is make sure that all express app is listening on the port number that we've set here at the top. So we can just grab the variable name, copy it, and we can just do app.listen, and then pass the port number and we're done. So this will be start start application. And if you wish, you can always do console.log. And then inside the slanted strings, we can put is service listening on port. And then we can just put pass the port number with the dollar sign and the curly brackets, like so. And this will just console log it for us. And everything should be all get to go. Now we definitely need to create this page. So let's do that. And this will be in views because we're using EJS in views, we can do another folder, which will be pages just in case if you have more pages. And then inside here, we can just create index dot EJS, EJS, and that's it. Let's just create a hello world and save. So technically speaking, if we go back to app.ejs, everything is looking good. Technically speaking, if we run our application, we should be able to render the index dot EJS. Now let's test this super quickly. So to do this, we can denote app dot EJS to start the app dot EJS file, press enter, service listening on port 5000. So now if I go to the browser, here we go, we go to the browser, press enter on localhost port 5000, you will see that we're getting hello world. If I was to change this to hello ready, save it and refresh, you will see that we're getting hello ready, which is good. So everything is working. And now we need to create a very basic form and see how we can use flash messages. All right, let's go back to our index dot EJS file and let's just create a very basic HTML page. Now you don't have to do this, but let's just do it anyway. We just type, if we just type HTML and press HTML five, this will create the HTML for us. Everything is looking good. Flash, flash messages, like so, save it. And inside the body is where we're going to create a very basic form without any styling, which is going to be super basic. So what I want to do is create a form first of all, let's start by creating the form. So form and let's open and close the form. And what's important here is that the action of the form needs to go to the homepage. So slash is the homepage. If it was the about page, you'll normally put about and so on. So we want the action to be there to be the homepage. And then we want the method to be set to post, because we're posting data saying this, that's pretty much it. Let's now create an input and a submit button. Let's do let's create a level for and let's say username. And then we can then put name or something like this, and then we can create or input in here. So let's do input. This input is going to be the type of text. And then this is going to have the name of user name. Like so, this is important. This is what this is how we're going to be getting the data. So this is the name that we're going to use to get the data. So that's very important to know. And maybe we just do to be ours, like so. Just so we make a little space because we don't have any styling. And the last thing that we need is a button with the type of submit. And inside here, we can just put submit to keep it simple. And I think that's pretty much it from our form. So if we just go and check it out quickly, you can see that we have name and we have the submit. Now if I was to put my name ready and submit cannot post and I think I've made a mistake. And this is because if you go to app.js, we just, I didn't change this to post. So we need to change this to post. Save it. Let's we might need to restart the application here. So if we open windows, when the power show here, control and see to stop it. And if I press up and press node app.js to rerun it, hopefully now we go back, refresh input ready, submit, you will see that the page is refreshing, but nothing is happening. Okay, let's say that we want to display the name somewhere on the page, when we submit this form. Now, what we can do is go back to index dot ejs. And first of all, let's make sure that we output the name. So we can do here at the top, we can do h1. And let's just do hello. And then with ejs, we can do open ejs like so, close ejs like so. And inside here, we can just put user name is what we want to get. Now technically speaking, actually we need the Nico sign is all here. Now technically speaking, if I was to save this, this will most likely break. So if I was to restart the service super quickly and start again, if I press five, sorry, if I refresh, you will see that we're getting an error. And this is because we don't actually have this object yet. So we need to create it to do this, we can go back in app.js. And inside the get homepage inside here is where we're going to create that object. And to do this, I'm actually going to create a let's say const. And this could be called username, like so. And this can be equals to request dot flash. And then let's just call it user. It doesn't really matter. This is just the object that we're saving the data to. And in fact, let's keep it as user. So it's different to this. And now what we can do is pass this to a page inside here like so. So we're passing it like so. Of course at the moment, it's empty. So nothing is going to happen. But if I save it and go back, let's restart. Should have used no more probably. And then let's refresh. And as you can see, nothing is happening. It's all working. And just we just have hello, but put ready, submit, nothing happens. Now, what we want to do is on submit, we want to grab the username from here in insert into this user object to do this on post, we can just put in here. So on post, what we have to do is rec request dot flash. And then we want we want to use the same user object here, you can call it whatever you like. So let's do user. And then we just need to pass some data. I mean, I can even write the manually, I can just put right here. And that's it. And that will be it. Actually, let me let me show you this. If I was to say this, this will redirect and hopefully this will display rat. Let's go back. I don't know if I need to read. Yeah, probably need to restart. And let's refresh. So let's put actually, I don't even need to put anything because I've put a hard coded. So if I submit, you will see that we're getting right. Well, to get the name from the form, we just need to remove this and just get it with the body pass. So rec dot body. And we just need to get the user name. So the user name is literally the name from the input here. So this is what we're grabbing. Technically speaking, now we should be able to restart the server one more time. Go back, refresh. And as you can see, we have hello, nothing is seen here, I can refresh as much as like, if even if I submit nothing is going to be there. But if I type something, if I put hello ready, we're going to get hello ready. This is how flash messages work. So if I refresh again, nothing happens. That's what we want. We don't want the form to be kind of like resubmitted on refresh. And this is why this is really good. Before we wrap up here, let me show you maybe another example. So for example, what we can do on the index page here, let's just do something. Let's just say we want to check whether the username exists. And we want to say the form has been submitted. For example, maybe we can do, okay, let's do let's open ejs like so, close ejs and insert here, we can just do a new statement. And we can just do username. If it's not equals empty, then we want to do something. So for example, we might want to display an h1. And let's just give us some styling. So let's just do say color of green. And then let's do font family of aerial, whatever that's getting too long now. And inside here is where we can display something. So for example, maybe we can just display your form has been submitted. Thank you. Thank you. And then maybe we can just pass the username again. So open ejs, close ejs, and then we can just pass username like so. And that's, we can put this on one line if you wish. But too much styling, I think. All right. Okay. And because we have a new statement here, of course, we're gonna have to close it. So open ejs, close with curly brackets, because this is a new statement. Oops. And I haven't actually, because it's a new stem, we need to open curly bracket. And then we're closing curly bracket in here, and then we close with ejs like so. So if username is not equals empty, display this. But if it is empty, just do nothing. Save this. And let's see what we get. Restart the server super quickly. And then if we go back, nothing has happened here. If I put ready, submit. And we get your form has been submitted. Thank you, ready. And that's it. If I refresh, it's all gone. And this is how you can use flash messages with express, express session, quickie passer, connect flash and ejs. Thank you very much for watching. If you found this video useful, please subscribe to my channel. I would appreciate it if you like the video and leave a comment below. And if you have future suggestions, just let me know in the comments below. And that's it. I will see you in the next video. Thank you very much for watching. As always, my name is ready. And you're watching my channel, rally the brand.