Nodejs MySQL Login system | Telmo Sampaio | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Nodejs MySQL Login system

teacher avatar Telmo Sampaio

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

11 Lessons (3h 19m)
    • 1. Node Mysql Intro

      1:41
    • 2. Creating the server

      15:23
    • 3. Connecting the Database

      11:55
    • 4. Handlebars

      14:08
    • 5. Home and Register page

      21:58
    • 6. Creating Routes

      19:57
    • 7. Register User

      30:04
    • 8. Login User

      28:49
    • 9. User Profile Page

      16:56
    • 10. Private Pages

      30:44
    • 11. User Logout

      7:33
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

166

Students

--

Projects

About This Class

In this course we are going to build Login and Register system using Nodejs and MySQL as a database.

First we will learn how to connect Node with MySQL, then we will create a Login and Register system.

After we will learn how users can log in using cookies in the browsers, and finally how we can have private pages that only users logged in can access.

Finally don't worry I will cover every single detail so you guys can easily follow along, even if you have little experience, I will add the full code in the end of the course!

By taking this course you will learn:

Learning outcome:

  • Create a Complete Login and Registration System

  • Create private pages only accessible to users logged in

  • Connecting Nodejs with MYSQL database

  • Learning how to Hash user passwords

  • Using cookies in the browser

  • and much more...

Meet Your Teacher

I'm Telmo Sampaio, a full stack web developer from Manchester, UK. I love to share what I know through my training courses, teaching and speaking on my youtube channel. Any questions get in touch with me, I would love to meet you!

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Node Mysql Intro: All right, guys, welcome to my new school ass on how to build a no Js and my SQL logging system. So there is a couple of pre requisites to take these course you need to know the basics of HTML and CSS and just a bit of JavaScript. So what are we gonna learn on these course? We are gonna learn how you can build a simple website using no Js. We're gonna learn how you can connect no Js with my SQL and you're gonna learn how to implement a simple logging and registered system. So basically, you can create any kind of website that you might need some people to log in and Onley loading people will be able to access some private pages. So, as you can see in here, I have a logged in user with the name of Telmo so I can go into the home page. I can go into the profile page and if I log out and I tried to go to the profile page, I can't. I'm redirected to the logging form. So this is gonna be the project that we're gonna build during this class and what I would like you to do as a project is to create a new website and you will implement a logging system where you will only allow certain people logged in in tow those pages. Alright, guys, I'm excited to start this project with you and I will see you inside of the class. 2. Creating the server : What's going on, guys today we're gonna build a logging system using note in my SQL. So let's just get in here A quick overview about this project that we're gonna build together. So this is going to be the home page, for example, of our project. We got in here on the top three links. So you got one for the home page, which is this one. We got another one for a log in, and we got another one for a register of the page. So let's just register someone. So I'm gonna put in here on the name I'm gonna put for example Marks. Ah Smith kmax Smith. I'm gonna put the email is gonna be marks at email dot com. I'm gonna put the password, for example. 12 3456 123456 And I'm gonna press register. And now these person marks should be registered in our database. And as you guys can see on the top now, I have links for home for profile, which is only available for people who are logged in. And we got in here The log out, if you want to look out the user, Of course. So I'm going to show you this is the database we're going to use? Um, no, my SQL, of course. So I'm just gonna refresh the page. Look, I got Max Smith. I got max email dot com, and I got the password that I just typed in, completely encrypted, completely harsh. So everything is secure. So let me just show you I got in here in the profile. I can see the name of this person, Max Smith. I can see the email. And I just got some random things in here, So this would be a page that he's only accessible for people who are logged in. Okay, so if I do look out okay, I'm logged out. Now, if I do, if I go in the top on the Ural to fourth slash profile, okay, it takes me back to the logging form, okay? It does not let me go to the profile page unless I am a logged in. So I'm just gonna log in again. I'm gonna put Max at email dot com. The password that I put was 123456 on wordpress logging. And now I'm back. Logged in. What am I using for logging in and logging outs? I am just using some. Let me go in here. I am using some cookies. Okay, so we're gonna learn how to deal with cookies in here. All right, So I hope everyone is excited Toe get started with this project. So for using the my SQL database locally, I'm gonna be using a software in here called Samp. Okay, So zump. So this is what I'm gonna be using, guys. Okay? I mean, I'm on windows. If you guys are on Mac OS, if you are using a Mac book, I would advise you to use thes um ump. Okay, because I don't know why when I'm using my Mac book, I always have some trouble using ZUMP, so I use the mumps instead. This one that is a free version. So you guys should be fine to use if you are on Mac OS. If you're on windows, just use this one example. Okay, so once you download these damp okay and you install it. And if you go into I'm just going here. If you're going to your C program files and then Samp they just like I have been here on the window C program files and then zump once you go inside, if you scroll down if you open these one, that's a Zampa control dot e X z These execute herbal, you should be able to see these small window. Ok, I would like you to just press start on the Apache and on the my SQL so you can just run your server locally for the my SQL. This is just gonna be used for later on. But you can just start it now if you want to. Whenever you don't need to use our database, you can just come in here and stop it, okay? He's gonna be very similar on month, so let's get started with our project. So I'm going to go in here and I'm gonna do, um I'm actually going to create a new folder quickly, so I'm going to go in here. Okay. I'm going to create in here a new file. I'm gonna call this one Note, my sq. Well, okay, now I'm gonna open that folder that I just created. So if I'm going to go in here No, my SQL I'm gonna open this folder. Okay, Now, I opened this folder with my visual studio code. This is the call the return it I'm gonna be using. So the first thing I want to do is, um I want to create ah, package or chase and file. So let's just open the terminal. When you open the terminal in here on visual studio codes, it should open the terminal directly on your on your directory. Where is your folder that you just open to make sure that you are on the correct place. Guys, you can just do pwd okay? And it should tell you Look, I'm inside of my D drive inside. Of course, is And then I'm inside of node, my SQL. And if I'm gonna do ls you know, there is nothing inside this command Allies is just to show you what kind of things do you have inside of this folder? So the first thing I want to do is to a NPM, innit? Bash? Why? Okay, I forgot to say something. By the way, guys, In order for all of these to work, you need to make sure that you have no Js installed on your computer. Okay, Just go back in here to the browser if you don't have no Js installed. Look, just go on Google know Jess. So it should be these Lincoln here. No Js dot or just download. Know, Jess, whether you are on Windows, mac or whatever you should be able to download and just, like, install it. Okay, so let me just delete Thies to make sure that you you have no jazz installed. You can just do note bash V. If you have something like thes veto an order, it doesn't matter if you don't have the same exact I think my know these a bit outdated. Now, the what was the newest one? 12 or 14. So mine is completely fine for now, so I don't need to care about these. You're saying make sure that when you do know Dash V, you have something installed. Okay? Now I can do in PM in it dash y Okay. And these now is going to create a file for me. A package dodges and file where we're going to keep track of all the things that we're going to install in our project. Okay, so now I'm just gonna create, um, a new file in here. So to create a new file, you can right click new file, or you can go in the top into these new icon and click, and I'm gonna call this file up dot Js So inside of these file, this is where I'm gonna put all the main things for our project. First of all, I'm gonna east all a couple of the dependencies that we need. Look, if you open your packages are chasing, you don't have any dependencies yet, but I'm going to show you some things that you need to install. So you need to install NPM I, which is short for NPM install and let me just see what do I need? So I'm gonna need a couple of things I'm gonna need express. Okay. I'm gonna need express to start our server. I'm gonna need my SQL okay, Because we need to connect to know J s with my SQL Um and what else I need I need something called a dot end. Okay. This is where I'm going to create all my sensitive information, like passwords and so on. So we keep everything protected. I'm gonna install HBs. This is gonna be handled bars. So HBs is gonna be our template for the HTML. Let me just install these for now. I think I'm missing something else. Oh, I think I'm missing. Um, yeah, I'm missing two things I'm gonna do in here. No, the morning. No. Sorry. I'm gonna do any PM I dash, dash save. No, the morn. Okay. No, the mornings. Just make sure that whenever we do some changes to our file Opto chess, um, we weaken. Just the server is going to just restart automatically. Okay, so if you installed nodes node morning. Okay. If you are on Mac, maybe you will have some errors trying to do this. You can just write like these pseudo before pseudo npm I dash, dash, save. No, the morning. If you are on windows, you don't need to put this pseudo okay. Only if you are on Mac on a Mac book. Okay? Right. I'm just gonna install one more thing. I think they should be fine for now. I'm going to install it after if we need to. So let's go in here to our app. Thaci s So let me go to my after chairs. There's gonna be a couple of things that we need toe doing here. I'm going to start in here with a const. Express equals two required express. Okay, so we need to import Express that we just installed to make sure that we can start our server from no jazz. Then after these, I'm gonna do a const up equals to express. Okay, this is just to make sure that you start the server, okay? With these up now, I'm going to dio something else in here I'm going to do, for example, um ump. No, I actually needs Teoh. Start my server. Let me Let me just see first. I'm just gonna start with something in here simple to make sure that everything is just working. Fine. And then I will connect to the database so app dot gets okay. I'm going to start in here with a request response. Okay, So what I created in here is whenever I go to my my page on the browser on the fourth slash , it means is just like the home page. I'm gonna run this function with a request and a response. Basically, these two things that we have in here. A request is basically, when you want to grab something from a form, for example, which we are not gonna deal at the moment later on, I'm gonna show you. And these rest is like a short for a response is what you want to send into the front end. Okay, so I want to do in here arrest dot sends. Okay. I want to send something into the front Dent. And I'm just gonna send in here, for example. Home page. Okay, so we created these route that this can be called the route because I can go to these four slash on my browser and show something to the user. Okay, Now that I have these, I want to do something else, which is gonna be up dots. Listen, So you need to tell express which port do you wanna listen in order to start your first project? So I wanna leeson on Port 5000. You guys can choose any port. 5000 to 5000 and 3 5000 and 1 6000 7000 8000 is up to you. I think there's gonna be a limit. I'm not sure which one, is it? But anywhere between 3000 and 9000 should be all goods. So after these, Okay, the sports. I'm just gonna put in here a function and these function in here, I'm just going to write console dot Log of, um, server started own Port 5000. This is just to make sure that these will run. Okay. All right, so now that we got this is just like the bare minimum to start your in O. J s project. I'm gonna go inside of my package dot Jason in here. What do I see these scripts I want at a new script. Okay, I'm gonna have the new script in here is gonna be called Start. And so whenever I do NPM start on my terminal. What do I want to run? I want to run this notes. Mourn up dot Js. Okay. Make sure that you guys put these comma in here in the end of these tests to make sure that you can add a new thing in here. So whenever I'm going to run NPM start in here on the terminal, no jazz actually is going to run this command node, mourn up don't. Yes, This is the dependency that we just installed before. No, mourn, because I'm going to show you something. Guys, whenever you do some changes to your file upto chess, for example, if you are not using node mourn, you need to stop your server and restart it again in order to see the changes. But if you use note morn, if you do some changes in here and you save it, you don't need to stop the server and restart it again. OK, so this is one of the great advantages of using these notes mourn. So I'm going to do any PM start If I do when PM start. Actually, no jazz in the back and is just doing node mourn upto chess running these file okay, and PM start. And if everything is fine, looks like we have in error. So it's saying already in use, I think is because it was my other project. So I'm just gonna put in here, for example, 5000 and one. Okay, I think it's because my my other project, look now is all good. My server started on Port 5000 in one. All right, so if I'm going to go in here onto the top. I'm gonna put the local host. Okay, Make sure that you guys do these as well. Okay, Local host Colon 5000 and one. Now you can see home page. Okay, so if you got all of these correct so far it means that all your project is working fine. And Ah, and that's it. Basically, we just start our server. Everything is working. We got our express. We got the message when you go to the to the front page and we put in here what kind of port we want to listen to And we installed a couple of our dependencies. Alright, guys. So that's gonna beat for these video in the next video. I'm actually going to show you how you can connect with the database. Alright, guys, I'll see the next video 3. Connecting the Database: All right, guys, Welcome back. So now we're gonna connect our no Js application with my SQL. Okay, if you have to remember, in the previous video, I showed you that you should install zump or month, depending on what kind of system you are working. Make sure that you're doing here a start on the on both of the Apache and the my SQL. And make sure that you guys in the last video that you install these my SQL as a dependency on your packaged or Jason. Okay. When you open your package, though, chase and you should be able to see me in a my SQL that we installed before. So let's go in here on our Opto chess. So there is one thing that I would like to do, And the first thing is, I want to import my my SQL. So let me just see I'm gonna do in here, eh? Const My SQL is gonna be equals to require, Okay, He's gonna be required. My SQL Now that you've got these all set, we can actually start our database, so I'm gonna start my database in year, so I'm gonna do const db You basically, you can call it whatever name you want. I'm just gonna put the DB is short for database is gonna be equals to my SQL. Okay, not create connection. Okay, so these create connection is a function, and inside, you're gonna put an object, and you're gonna put a couple of things, which is gonna be the host. Okay, You need to tell which one is the host. So because we are working locally now on our machine at the host is going to be local host . Okay, If you're gonna be working on a server, for example, you have your server that you you just bought online or something you can put in here the i p address of the server that you just bought or your own server that you already have. You can put in here the i p. Address because we are running locally. Local host. Okay, then I'm gonna put in here the user, okay. And, ah, the user by default. Okay. I think this should be if I'm not wrong, these needs to be like this. Okay? In between strings, the user is gonna be a route, and the password password is gonna be empty. Okay, so where are these values coming from? OK, so when you install my SQL in here with these zump by default, zump brings a user that the name is route and the password is just single quotes empty. Okay, there is no space in here. Guys, look, that is no space I'm gonna delete it, you see, is just to single quotes together. So this is the regular user and password from Zump. If you guys are using mumps for Mac os, I believe that the user and password is route route. OK, this is form UMP. If you are using mumps, if you are using this one Zampa like me, the password is empty. Okay? And then we need to put in here, eh? Database data base. Okay. You need to put in here the name of the database that you want to use at the moment. We don't have any database created, so we're gonna create one now, so make sure that you have your Apache and my SQL started. Okay? So if you go into your browser and you just put this on the top, let me show you Mocha host, fourth slash beach be my Haveman. So local host PHP. I'm gonna put in here. I'm not sure if you guys can see it. Well, I'm just gonna put in here. So, http Poland slash slash local host PHP. My admin. Okay, this is what you need to put on the browser. Okay? I'm gonna just delete these. You can pause the video if you need to copy it. Okay, so let's go there again and on the side. You should be able to see something similar to this on the side. This is where you create all your data basis. Okay, so in here, I'm gonna put ah a new database. So I'm going to create a new and in here where it says database name. I'm gonna put note. Js dash, log in. This is the name that I'm going to give. No, Jess, Dash log in and I'm just gonna breast create You don't need to do anything else. Okay, so this should be all goods. OK, so no Js dash log in now we added these in here Note jazz dash logging. Okay. We created the connection in here. Then let me just see. We actually needs So we created all the values in here for the connection. Now we actually need to connect it. So how do we connect it? We do. Db Look, this is the DVD to just creative, and you're gonna do dots core necked, OK, db dot Connect. And now in here, that is gonna be a function. Okay. And these function can have an error or the result. For now, I'm just gonna put an error. Okay, Just gonna put the narrower, So in here, I'm going to say if there is some sort of error. Okay? This is what this parameter means. It means that if we catch some error in here in this connection, I'm gonna do a console dot log of these entered. Okay. I'm gonna show you in a second if I'm gonna put some wrong details in here. So console thought log of the error else. Okay, So else I'm just gonna do console, not log of my SQL connected. All right, so if you save these, you should be able to see now a message down here on the terminal that it say's my SQL connected. So now your application, your no gs is connected to the my SQL database that we just created. So imagine that for some reason you put something wrong in here, it could be the password. It could be the user name, the host or the database. It doesn't matter. You put something of the details wrong. You should be able to see an error on, um on the terminal. So I'm gonna put in here. No Js a log in. I'm gonna put an extra end, for example. So as you guys can see that he's in. So now you've got a big error in here on the terminal and it say's unknown databases. No Js log mean Okay, because we got to ends. I'm going to remove it. I'm going to save it. And look, we go back to the my sq. Well connected. All right, so we got all of these connected now. Eso basically we we can just create some some tables. Let's just create some tables because we're going to use We're going to need to use some tables in here for for storing the values of our users. So I'm going to go in here, so I'm gonna check This is my database that I just created for this project before this. So as you guys will see, we need to have an i d eso we need to ever call in for storing the ideas of the users. We're gonna need a column for the name we need to ever call him for the email. Another column for the password. So let's create these stable and inside of our no jazz logging database. So how many? Let me go back and check. So I had one column. 1234 So four columns. Let's go back in here. No jazz Logan. When you click it, it should be able to give you in here to create a table. Give it whatever name you want. I'm gonna greet the table for the users because I want to log in, log out and whatever. How many columns I think was four. Yeah. Okay, let's press go. So the first column is gonna be an I d. Because each user that you you registered in your database should have a unique I. D. So the type is gonna be an integer because is a number. Make sure Let me just scroll a beating here to the right sides. Okay, there is a column in here that he say's a I, which is a short for out or increments. So I'm going to click in here, and I'm not going to change nothing in here. I'm just gonna breast go. Okay. So what are we doing in here? Basically, whenever you create a new user, if you have these sticked Okay, you are making these out or increments. So it means that every time that you create a new user, the idea will be generated automatically. So you create a user, he's gonna be with the idea of one you create another use. It is going to be with the idea of two and so one, so you don't need to worry about that. So after that, what else do we need? We need the name. Okay, So a column of name, So name is gonna be with a type of archer. So Varsha is just a variable of characters and that we can give a limits if you want to. So, for example, I want that all my users have a maximum letters. Maximum characters of, for example, 100 on the user name. If someone has a user name with greater than 100 characters is just not gonna be able to register these. Okay, so this is gonna be for the name. I'm gonna do the same for the email. I'm just gonna put another var chart. Okay, I'm gonna put one hundreds, and now I'm gonna put another one. So we got I d name email. And finally, I'm gonna put passwords. Password is gonna be a bar chart as well, because just like, regular characters. So I'm gonna put 2 55 just in case to 55. Should be a lot for if you wanna have a huge password. All right, so if you have all of these Ah, done. Okay. You just press safe. Okay? And now look inside of your know, Jess, log in. You should be able to see the stable of users. Look, I'm clicking on it, and if you go on the top, what it say's structure? OK, you should be able to see the i. D. The name, the email and the password. So you got all of these things in here, So basically, we got everything. We got everything. Now that we got our database connected as you asking. Seen here on the terminal, we created our database and the table with all the details that we need for the users. In the next video, I'm gonna show you how you can create a home page, for example, and and after the home page, we can create the register and so one. So I hope that you enjoying these so far until now. And that's it. Guys, I'll see you in the next video. 4. Handlebars: All right, guys, welcome back. So in this video, we're gonna learn how to build our home page. But first, let me just show you something we don't want tohave in here. All these sensitive information, like our user name and password of the database and these host. So I'm just gonna create in here something called a file called the dot Envy for the hour in various environment variables that we want to protect. So in here, outside of everything, I'm going to create a new file with this dot e n V. This is where we're going to create all our sensitive passwords and so on. So on my abdo chess on the top, I'm going to just import something I'm gonna do a const dot e envy If you guys remember, we install these on the first video. So constant dot envy is gonna be equals to require so required dot envy and no. So now that I got to the zloty envy I need in here to just before everything I'm just going to do dots and v ok dot con fiqh and basically in here, what I'm gonna do is tell these extension dots envy that we just installed. Where is the file that has all these variables that we want. So I'm going to go in here that you ve config inside. I'm gonna put an object, and I'm gonna put in here the path, Okay? The path is gonna be okay. Make sure that you put two single quotes. I'm gonna put dot slash That slash It means that we are writing this code in our Abdel chairs, and we are gonna look on the same level of directory. So it should be somewhere around our after chess that you guys can see here on the left side. So it's gonna be anywhere. That's why I'm gonna put dot slash and is going to be the file called dot BNV. Okay, If you guys want, you can call it anything that you want. As long as it has the extension of dot envy. You could call it passwords dot envy conflict, Dottie. Envy anything. But I'm just gonna put dot envy. Okay, now that we, um, that we have these in here, we can actually start going into our dot envy and put our sensitive information. So in here, I'm gonna put something like. Okay, Database equals two. No jazz log in. Okay. All right, guys, in here. You don't put any single quotes around. You don't put it and you don't put any semi colon in the end. Make sure that you don't put so it should be exactly like this. Okay. No Js dash logging. Okay, this is the name of our database. I called it database in here, but you guys can give it any name that you want. Okay, Let's go into our after chess now instead of having in here on the database. No, Jess, log in. I can just put process dot envy. Oops. Process. Not envy dot Data base. This is the variable that is inside of our dot envy. Okay, so let's do exactly the same thing for the host, for the user and for the password. Okay, so in here, I'm going to create another one, So database underscore Host, for example, he's going to be a local host. Okay, I'm gonna put database underscored. User is gonna be route and they debase hoops. I'm gonna put database underscored, um, password. There's gonna be equals two. Nothing. I'm not gonna put nothing in there because he's empty. Okay, so we defined all these variables. I'm gonna go back into my apt o. J s. Now I can replace all of these with process dots. E n v dot host. He was the name. Let me see. I put database host. Okay, let me copy this. So database host now is gonna be the same thing for the user and for the password. So for the use, it is gonna be database user and in here is gonna be database password. Okay, If everything that you guys did is correct, you should still see a my SQL connected down here on the terminal. Look, I'm pressing safe. The server is just restarting, and everything is still fine. Okay, so now that we got to this, um, this is all goods. Let's just create our first our home page. So let me just go in here. Let me just open this. If you guys remember, we installed a dependency called HBs for handle bars. That's our template engine that we're going to use. So I'm gonna put him here up. Thought sets. Okay. And in here, what I wanna set is the view engine. Okay, so you need to tell. No Js. What kind of view? Engine. What kind of you engine do you want to use toe to show your HTML. So I'm going to use the h p s that we just installed so up dot set view engine and I'm gonna set h p s. This is the the templates that we're going to use, and I'm going to show you in a second. How do they work? Okay, so we got this. Now, if you want to create something, Okay, let's go in here on our folders. Your folder needs to be with the name of views. Okay, Views. This is the default name that handlebars uses. Okay. And insides. I'm gonna create the file called Index, not H b s. Okay, this is the extension of the handlebars files, so index dot HBs This is gonna be my home page now in here. I'm gonna do a html five. Okay. I'm gonna do in html five just to start to these templates. But there's something else in getting our app. Thaci s that. I want to set eso in here. I want to set a couple of things. So the first thing that I want to set ISS I'm gonna put in here Const. Public died, actually. Okay, so Const Public directory. So your public director is going to be where you gonna put files like any CSS or any JavaScript for the front end that you might want to use. So where is this gonna be? Is going to be in path dot Join. Okay, so when you use these variable of path, you actually need to import these because this is, um, a part of the no Gs. So you need to go in here on the top. Okay? You need to do a const. Path equals to require okay, path. These comes out them from default with no Js. So you don't need to install it this path. So let's scroll down again. Where? Okay. Const Public directory equals towpath dot Join and path torturing takes two parameters. The 1st 1 is going to be in here, for example, the underscored look at these guys. Some of you already make these kind of mistakes. You need to put one time underscore two times. Underscore. Okay, is not one time but to their name. Okay, so this is a variable from no Js That gives you access to the current em to the current directory where you are. I'm just gonna do in here a console. Don't log console. Don't log of underscore. Underscore their name. Okay, so if I save my file Look, can you guys seem here on the terminal D courses? Note my SQL. So is giving you exactly the directory of your file where you want at the moment. So is giving you the director of the file. Where of the folder where your file is and I want to join these. With what? Okay, I want to join these with a dot slash Remember, Guys, we use the dot slash to go on the same level of the app togs, and then I want to go inside of the folder called Public. Okay, so these folder public does not exist, so we will create it now. So I'm gonna go in here and do public, and in the sides of these public, I'm going to create the new file style dot CSS. Call it anything that you guys want to do it here. Backgrounds. Okay, I'm gonna put body. Okay. I'm gonna put body background color of orange. This is just to make sure that this will work after. Okay, so, um ok, we've got all of these set up now going back to the app dot Js Let me get rid of these. Council that law. Okay, so after you define where is your public directory To use all your CSS or any javascript that you want, you need to make sure that express okay, Your server is actually using these public directory, so I'm gonna put in here up, not use. And now I'm gonna do express dot static, Okay. To grab all our static files, like the CSS starting in javascript that you need and you need to put inside of year inside of these Express, not static. The public directory that you just created before. Okay, so now if all of these east Fine, let's go inside of our views index dot HBs on the top. Okay, I'm gonna link. Okay, I'm gonna press link. That is gonna be these Drop down. I'm gonna click in your rates a CSS and make sure that you put in here a ford slash in the beginning. These four slash In the beginning It means that is gonna look inside of the public folder for some file called style dot CSS. So they should be all fine. Now, I'm just gonna put in here for now. H one saying, for example, uh, home page. So if I go into my browser, I'm gonna go into my local host. 5000 and one, and I refresh nothing happens. Why? Nothing happens. I don't see nothing on my home page because you need to go into your app. Thaci s okay in here where it says up. Don't get this time. You don't want to do arrest dot Send? You don't want to send the response into the browser with these message. What you actually want to do is I'm just gonna copy, comment this code out. I'm going to do arrest dots, render, and you do arrest not rendered off. Fourth slash. Okay, so when you do this, this fourth slash um, you want not not four slash story. You do arrest, not render you want. Render what file you wanna render the file of index dot HBs. Okay, So when you go onto the browser toe, ford slash which is your home page you wanna render the index dot HBs file? So you put in here, index, you don't need to put the dot HBs You don't need to put so just elated. Okay, so let me just go back into my views index dot HBs and I'm just gonna put in here. Ah, handlebars handle bars home page just to make sure that this is actually from the handlebars, that we can see it save the file, going to the home page in here. And now if you refresh a couple of times, you can see handlebars home page, and you can see also the styles that is working. Fine. Okay, so now that we got this, basically, we can just create our home page like Well, like why I showed you in here, So I'm just going here. Look, this is how on the home page is gonna look like white guy. So we already started these. Now, in the next video, we should really be able to finish the home page. We got everything set up now is just creating some HTML and CSS, and we should be all good. So I'll see you in the next video. 5. Home and Register page: All right, guys, Welcome back. So in these really, we're going to start building the home page, and I think that I'm actually going to start as well building the register page just like the front end so we can actually see something on our website. So before I just get started in here, I'm just gonna connect some bootstrapping here to my project. Because if you guys don't know, bootstrap is just like a framework that you can use toe put some styles in and make our website just run a bit more faster without having to spend too much time with some CSS. So I'm gonna go in here. I'm going to write down Bootstrap. Okay, I'm going to click in here. This is the order, the official website of Bootstrap. So I'm just going to click in here What it says get started, and it should give me some links. Okay, so there's, like, some links in here for some CSS, so I'm going to copy these. I'm gonna put this just before I let me just scroll down in here. I'm gonna put this before my style dot CSS? OK, this is important. And then I'm going to copy these three links in here. I don't even think I need them all. I think I just probably need this one in here on the top. I don't think I'm even gonna need these. But just in case, OK, I'm going to copy that, and I'm gonna paste it just where my body of my page in year is finishing. Okay, so I got the top, which is the CSS, and I got down here some javascript if I need to use from bootstrap. Okay, so now that this is done, let's start, um, building our home page. That's that's why we had in here. So I'm going to go in here. I'm going to create a navigation. Okay, so I got the navigation inside. I'm gonna have an h four. And these h four is like a title. I just going to say note my my SQL. Okay. And then inside, I'm gonna have a norther with least with, um, some ally. I think I'm gonna have like, um, three things. So ally times three. And then I want to have some anchor elements. Okay, so I got you l ally, and then I got thes Ah, anchor elements. So I wanna have in here first of all, my home. Then I want tohave log in, and then I want to have a register. Okay. I'm gonna build their home page now, and then I'm gonna build the registered as well. So we got these. Now, I'm going to start having a thief in here. So they've with a class of container. So for those of you guys who don't know these class of container, this is a class from bootstrap Just centers everything on your page and gives the like a maximum with to the Deve. It's just a way to style these, But you shouldn't worry too much about this because we are on a on and no jazz in my SQL tutorial. So we don't want toe spent too much time with the CSS, but I'm just like telling you what these does. And then I'm gonna put a margin bottom off Mt. Four. So this is a class now. Actually, this is the margin top four. So, four, I believe this was on CSS is like 25 pixels. If I'm not wrong, you guys need to check it out after eso you got container, You got a margin top of four, and then inside of these, I want to put some sort of some random content that you guys can actually check it in here on. Bootstrap. If you go in here on bootstrap, where we were before, if you click on contents. Okay. If I click, maybe not contents, maybe components. Let's click and hear what it says. Components. If I scroll down, there should be something in here. Let me see. Drop downs, forms. Jumbotron. This is the one that I want Jumbotron. Okay, so basically, these Jumbotron is going to give me a piece of coat in here that will give me these style. And these kind of text is just a place hole that if you want to have on your website, so I'm going to copy this, Okay? Jumbotron. And I'm gonna baste it in sight. Make sure that you guys organize your code. Well, I always like toe organize everything. Well, so, Jumbotron, I got some text in here, and I'm going to just change the text in here to say log in project. And then what I'm gonna put in here. So this is the same thing. I actually I didn't even change nothing if I'm not wrong, So this is exactly the same. Okay, so let me just save these. Let me go back to my website. Refresh the page and look. Now I got something in here, The orbital assuming here. Okay, let me get rid of these. So let's apply some style. If you guys remember, we created our CSS file inside of the style dot CSS. So that's where I'm going now. And first of all, I'm going to go in here. I'm gonna get rid of these body because I don't want to. I just did this before to test if the CSS was working or not. So I'm gonna go in here and I'm gonna do enough. I'm gonna put the background color on my enough off. Okay, I'm gonna put these hashtag 563 the seven c. Okay, so this is the color that I want. You guys can put any color that you want. You got in here some eggs, a decimal good for it. Then I'm gonna put to the color of the text. Inside of enough is gonna B f f f, which is just like a short coat in your exit decimal for, um, white. Then I'm gonna put some parting on my enough of 30 pixels, top and bottom, and then 60 pixels left and right Finally, I'm going to send thes as a display of flex. Okay? And then because I already said my display to flex, I can set my justify content to do space between what the's display flags and these justify content space between Does is inside of mine Off is gonna grab one element in another element and is gonna put them both on different corners. Okay, because I want to have them separate. So if you guys remember in our index dot HBs inside of our enough, we got this title h four and we go to these an order list with these kind of navigation. We actually even forgot to what? Some. Some things in here. So I'm gonna put in here that when I click on this button is going to go to the Ford Slash . Whenever I click on these button of the log in, I want to go to fourth slash log in and these button in here, I want to go toe. Fourth slash register. Okay. We don't have these pages at the moment, but we will create them later on. Okay, let's go back to our styles. Nazi SS. So we apply these styles for our enough. So let me go back in here to the browser. I'm gonna refresh and look is looking better now, Okay? We got some styles in here in our navigation by, but this is not everything. So I'm gonna go in here. Enough. You Well, okay. I want to set it as well as a display flex, and then I'm gonna put justify content space around. So basically what this space around us is if you guys remember in here, this is my you. Well, this is the Children inside of the U L, which is thes allies. And if I'm going to set the justify content to be space around, they will have the exact same space around them. Then I'm gonna put a line items to be center. So what these does is gonna align vertically in the centre. My allies okay? He's gonna be the allies because they are the Children of the you. Well, okay, So now, after these I want to grab my enough ally. Okay. If you guys noticing here on your page on your brother, All these allies that we created before they have these kind of dots these circles before. So I'm going to do a least style to be none. Okay, these least Sile none is going to remove all these dots, so I'm gonna go in here. Look, we got home logging register, right? So, no, There's one more thing that I want to add, which is my enough ally A. Okay, this is the anchor elements that we have inside of the Allies. Now, I want to set the color of the text. Toby White. Okay, You actually need to specifically do it in here because, um, it just doesn't target appear when we did it. Maybe we don't even need these one. We need these one for them for the title. So that's fine. Let's leave it in there. We got the Call it in here. Then I'm gonna do a text decoration, Toby. None. This is because when you create some anchor elements by default, if you guys seen here when I over with my mouth, they come with the underline under the next. So we just removed that using the text decoration? None. Then I'm gonna set my font wait to be both, okay? And finally, I'm just gonna have some popping. When I said some parting of five pixel stop in bottom and eight pixels left and right, so I will refresh the page. I'm just shortened these up a bit. So home logging and register. This is all good. Finally, I'm just gonna heart another thing in here, which is when I hope over these anchor helmets. So if I go in here a over Okay, I'm I'm gonna ho over with my mouth over the anchor elements. What I want to do is set the caller of the text to be yellow. And then I'm also going to set the text decoration, Toby None. Just to make sure that there is nothing of underlines in there. Refresh the page again, guys. Okay? And now if you over there it is. Okay. It's not too bad. So this is if I'm not wrong. This is everything for our home page. Now I want to create just the front end of my register page right now, because in the next video, we will learn how to actually register a user. But now, now that we are just in here, it is just like so quickly. Let's just create this page. So to create this page, we will go inside of our views. I'm going to right click in here, and I'm gonna create a register dot HBs. This is gonna be my page. Okay, so remember guys thes registered at H P s needs to be inside of the views in orderto work. So I'm gonna copy first of all my index dot HBs. I'm gonna copy everything in here because that is going to be a lot of codes that we can reuse. Okay, so I'm gonna go in here, I'm gonna paste it. So the new thing that we have in here that we want to change is these class in year, these container with all this stuff. So actually, let me see. Maybe we can even keep some of these things so we can actually keep they contain them. Okay, let's keep the container and these margin on the top. And now let's actually start adding some content in here. So if you guys remember going back to the bootstrap. If you guys go in here, there is something called cards. Okay, so this is what I want. So register eso. As you guys can see, there are these kind of elements. They have a class of card card body card title. So I think this is what we need. Okay, so I'm just gonna copy this, okay? I'm gonna paste it inside of here, but I don't want all of these stuff, okay? I don't want all of these stuff, so let me just get read. Let me just see. Yeah, I don't want all of these stuff. I want to delete this. Okay. So I just going to keep these class of card. I'm gonna I'm gonna keep the card body as well. Sorry. So I got this card body. I got this image. I don't need these image for now as well. Um, Okay, so let me see. I have these live with the class of cart. I have these Deve with the class of card body inside. And okay, so just before these card body, I'm gonna create another dif with the class of cards heaven. So this is also another bootstrap class and insight. I'm just going to say register form. Okay, so this is gonna be in hearing this card, Heather. All right, so now we need to put in something inside of these card body, and what I want to do is just use some some forms. Okay, Let's go to these boots, drop a website again. I'm gonna click in here where it says forms, okay. And I want to get something similar to these. Okay, some overview. You guys can seem here that we have an example of a form. So I'm just gonna copy all these text that you guys can see in year when a copy, right click, and I'm gonna baste it inside of these kind of body. Okay? I'm gonna make sure that I invent my coat. All very well. Okay, so we got to these insides. So this is in here. This is fine. Okay, Now I need to invent all of these. Okay, so we got the form starting and closing, so I guess this is all fine. So let's start eso when you register. What do you need? You got an email. OK, so I'm going to start with these, Deve with a class of form on the top. So, first of all, you ever a label? The label is just what you see on the front end of the page. Okay, So I'm gonna create in here. I'm going to say name. Okay. This is gonna be the name of the user. And in here, the label is gonna be for what kind of input? The input that I want is gonna be, uh, name three. So this is the input, okay? He's gonna be with a type off text. Great class, form, control. Let's live it like that. And then we got an I D. Okay, when you have these label with these four, these four name, it means that is for the an input with the idea of name. So let's put in here on these input the i d of name. Okay, this is so we can connect these label with these input. Okay, then we got in here some aria, this crime. I don't think we even need these. Okay, so I'm just going to get rid of these area described email help. Okay, Let's just get rid of that. And we can also get rid of these small element in year. Okay, Where the little of these So inside of my form. I have these d for the class of form group with these label for the name and then in here an input with the type of text class, form, control, idea of name. And I think we are missing something else. Um, I think we're just missing something in here, which is? The name equals two name. OK, these name in here is gonna be a name that you need to give to your input. So then you can grab it with no Js. Okay, so I'm just gonna put in here name. This is the volume, because this is an input for the name. Okay, so this is name is gonna be the value. Okay, let's go to the next one. What else do we need? Let me just see. We need une mail address. So the next one is going to be another d for the class of form group with a label four. Okay, I'm gonna creating here email. These label is gonna be for the email. So the text that I want to see on the front end of my website is going to be e mail address . Okay, So, like we said before, we got the label for an email, he needs to be an input with the idea of email. So I'm going to click in here. Copy this. And these input now is gonna be with the type off email. Okay, class Foreign control. I d. Okay, let's put in here the i d. And now let's put the name as well. The name of these imports is going to be email. You can give it whatever name you want, but they should be fine. Okay, we got the name, we got une email, and finally, we need a password. Okay, so we need a password. So let me just the late these form check because we don't need this is gonna be an import with the type off. Actually, let's just the late to these and I'm going to copy this one. These dave with a class of foreign group and I'm gonna baste it down here is gonna be very similar. OK, label four passwords. Okay. So I'm gonna put in here. This is what you see on the front end of the website now, which is just password, which is fine. And then Okay. What do I need? I need an input with the type off password when you create an input with the type of passwords you can't see, actually, the text that you are writing down, so it's just like for safety. So let's put the i d of password. Okay. So we can connect these label with this input. And finally, let's give you the name of password. These name in here? These name of password. This is how we can grab it with no Js. Later on, I'm gonna show you. Okay? Finally, we got the button to submit our We got a button to submit our form, and this is going to say register user. Okay, let's just save this and make sure that this is working. Let's go back to the browser. Okay? I'm going to refresh the page. I'm going to this time try and going here to register. If you try to go to register, it's not working yet, Okay? Because we need to go into our app Thaci s. And just under these routes that you created before I'm going to copy this and I'm gonna paste it in here when I wanted to. One up dot Get these dot Get is an http method from the browser that is usually used to render the pages on the browser. Okay, these get and then whenever I want to go toe ford slash register. Okay, These sees the route. When I want to go, I want to actually do a rest. This is short for response. I want Orender. What? I want to render these register dot HBs file that we just created. So I'm gonna go in here. I'm gonna press registered. This is the file that we want to render when we go to the browser on ford slash register. So I'm going to save these. Let's see if this is actually working. Now I'm going to refresh the page. Look, I got registered form. I got the name, the email, the password and the button that will serve meet our form. Alright, guys, I know that these class was a bit thes video was a bit longer than usual, but, you know, we just created our home page. We just creative our register page, and basically we are ready. All ready and set to on the next video start, actually sending the values in here to the database. Alright, guys. So I'll see you in the next video. 6. Creating Routes: All right, guys, welcome back. So in these video, we're actually going to register our users. So let's get started in here. Let's go to our Opto chess. The first thing I want to do is I want to just create some different routes. I'm gonna put these on a more organized way. So in here, on our folders that we have on the side, I want to create a folded just completely dedicated for our routes. You guys remember when we created these routes for the home page for the register? Soon there will be so many different routes that if we keep everything in here on the same file, it's gonna be difficult to read all of these. So let's just organize our coat when you create a new folder called Routes. Okay? And hopes I think I created these wrong. So I'm just gonna delete this. I'm going to do a new folder and I'm going to call it routes, okay? And inside of these routes, So I'm going to create one file called pages dot Js. Okay, so these filing here is gonna just, like, organize all my coats and to create all the routes for all the different pages that I want . So at the moment we only have our home page, which is the fourth slash. And we have another page, which is the register one. So what do I want to do in here? First of all, I wanna import my express. Okay, so const Express equals to require express. Okay, then what I'm gonna do in here is there were const router, okay? And this is gonna be equals to express dots. Rather, I think needs to be capital if I'm not wrong. Great. So, const router equals to express that router, and I'm going to show you now what you can do with this. So in here, now, you can do router dot gets okay. And what I want to do in here is go inside of my four slash. This is gonna be the u R l for the home page. Now, I can do the same thing like before I can have a request response. And now what I want to do in here. I just wanted to arrest a response that render and I want to render the index page. Okay. This is exactly what we have on our after Js, but we're going to keep things in here organized. So we got these router for this one, and I'm just gonna copy. Just put the semi colon in the end. I'm gonna do exactly the same thing in here now for my register. Okay, four slash register. And this time, when I go in here to my ford slash register on Orender What file? I would render the file inside of the views called Register. Finally. Don't forget toe on these because otherwise your code will not work. I'm going to do a modules module dot exports, so module dot exports equals two router. Okay, Because we need to make sure that we can export thes router that we created and that we are giving in here for our pages. We need to export it. Okay, now that we got our routes all defined in hearing to this folder into these file called pages, let's go back into our up dot Js. Okay, So if I go into my app dot Js, What I'm gonna do now is, instead of having these two things, this is exactly the same thing that we just created on the other file, So I'm gonna delete them. I'm gonna put in here the fine routes, like comments if you want to get organized and I'm gonna do up don't use. Okay? And now I'm going to say that whenever I go to the fourth slash Okay, I wanna required okay. I want a required my dot, slash routes. Okay, remember that we have thes dot slash routes because we are now we are right in that. This coat inside of Abdel Js and we need to look on the same level of directory. We need to look to these folder called Routes and then we want to go inside of that, full the routes and grab the pages dot Js. Okay, so you can just write pages. You don't need to do pages that Yes. Okay, so this is what you want to do. So whenever he wants is the fourth slush. It means that you're going to go inside of your routes inside of your pages and you gonna check in here all these routes if you're going to get these one First of all, you're gonna render the home page. If you want to get these four slash register you should show the register page. Okay, let me save this. So let me just refresh the page. Make sure that everything is still working. So if I go to the home page register, everything is still working. Fine. Okay. There's no problem at all. Okay, Now let's go back into our views inside of our register. Actually, we need to create another route, OK? We need to create another route, but yeah, let's go to our register dot HBs. So if you guys remember inside of our register dot HBs. So let me just open it in here as well. So our form that we created forms always need to have two things. Okay, They need tohave in action. Okay, So what is these action when you feel up all these form and you click this button down here that it says register user, you actually need to submit these values that you put inside of the form. You need to submit them somewhere to some sort of a u r l some route. So this is where you specify it. So the action is where you want to send all of these values. So I want to send all of these values from my form to fourth slash off ford slash register . Okay, this is where I want to send all these values from this form. Okay? And then I need to specify what kind of http method we want to use. Usually when you want to send some values inside of your database. The most common HDP http method used is the post method. Okay, so I'm gonna put in here Method equals two post. Okay, this is the http method that we're going to use in order to send the values. Okay, so now that we created these, let's create these route in our know Jess Okay. In order to gravel of these data. So if I go first of all into my app dot Js remember, we got these your l four slash off four slash register. So I'm going to go inside of my apt o j s. And I'm gonna do wear up. Don't use okay whenever I'm going to some four slash off, okay? I'm not gonna put the rest because I'm going to create for register for logging log out. So I'm just gonna put in here whenever we go toe a four slash auth. Okay. I want to require some routes. Okay, so I'm gonna put in here dot slash routes. Okay? And if I'm not wrong, I'm gonna put in year. I'm gonna do off, okay? Both So obviously, Like I said, whenever we go on the URL tow fourth slash off something else, we're going to require these routes. Okay, Routes off these file does not exist right now. If we go in here inside of routes, that is no auth dot Js file, so we will create it Now I'm going to go in here. New file off dot Js Okay, now there is nothing inside of year. I'm actually going to go into my pages dot Js. I'm gonna copy all of these, and I'm gonna baste it inside. Okay? So I'm gonna based all of these things in here and now. Okay. If you guys see, let me see. Express required express. I think we got everything. So, router, I want to create one. That is to I mean, just delete all of these. I'm gonna doing here a router dots post. Okay, so you Onley will be able to access thes route via post great. When you submit their form, you submitted by a method of post. That's why you need to put in here router dot post. And you want to submit these two off? OK, Which you already did. Look, abduct. Use off. Okay, this is redirecting us into routes off. This is the file, and you want to do in here registered. Okay, So, basically off course you don't see in here the rest. This is almost like having in here off register okay off because it's coming from the other page, and then we just finish it in here with the four slash register. Okay? So when we submit these in here, you don't want to render any page for now. Okay? You want to actually create a controller that will be able to deal with all the data from the form, so I'm gonna put in here this Okay, so I'm gonna put in here a comma enough that I'm gonna put in here. Auth controller dots register. So these off controller dot register does not exist because we're going to create these off controller, so I'm gonna import it in here on the top, First of all. Okay? so I'm going to do a const off. Controlling is gonna be equals two require. And now, look, we are writing these code inside of both dot Js. So I'm gonna create out here a folder called Controllers and then inside there should be some kind of file. Okay, so I'm gonna go dot dot to go one level up. Remember, we are in off that. Yes. We need to go one level up. I want to go inside of a folder called Controllers, which we don't have at the moment. I'm going to create it, and then I'm gonna have a file inside called off. Okay, so let's just create thes outside of everything. I'm going to create these folder called Controllers and Insight of these controllers. I'm gonna create one file called off dot Js. So now what we need to do in here is first of all, um, I'm just gonna do in here. What? I'm actually just going to create something in here quickly because I think these videos is getting too long, so I'm just gonna keep it short in here if you guys want to make a pause, So I'm going to do on exports. Dots register. Okay. And this is gonna be equals to, uh, request response. Something like these. And I don't think that I need to do anything else right now. I just want to do something in here just to see if I can grab the data from the I don't need. I don't think I need to export anything else. So I'm gonna go doing here, console that log off the request dot body. So what these requests dot body is doing is basically grabbing all the data that we sent from the form, and we're gonna log it in here in our terminal. But I also want toe show it in our in our page. So I'm going to do in here rest, not Jason. Okay, I'm gonna do arrest or Jason, and this is just to show on the front end, so I'm gonna put in here. Um, actually, I'm just gonna put in here residents and after we're gonna do it. So form serve me toe. Okay, let's just test these out if it's working. And then So I'm gonna go in here. I'm gonna put in here, Telmo, and I'm gonna put in here. Tell more at email dot com and I'm gonna put the password. 123456 And I'm gonna press register. Okay, so if you guys can see on the top I have in here forms submitted, which is this and down here, I'm actually not getting what I want. So let's see what's wrong with this? So the problem is, you actually need toe add two new things in O'Nora apthe chess in order to grab data from the forms. Okay, so after I set up in here my public directory, I'm actually going to set up to things in here. One is gonna be the up dot use. Okay? Which is going to be in here Express daunts. You are l and codus in code duds. Then you're gonna set up extended, extended, false. Okay, so I'm actually gonna copy this, and I'm going to set it in here so you guys can copy if you want. Basically, these line in here is just like parsing u r l encoded bodies as sent by HTML forms. Basically, this is just to make sure that you can grab the data from any forms, Then you need to set up another thing in here, which is the up don't use. And you want to set in here express dot Jason. So this I'm also gonna copy some comments that I have in here. So these line is actually making sure that the values that we are grabbing from the form they come in as Jason's. Okay, So I'm going to save these, and I'm gonna try to submit my form once again to see if I get the values down here. Okay, so I'm gonna put in here the name, Tell more tell mewhat email dot com and I'm going to press 123456 I'm gonna press register and let me see. Let me go up here. So if you guys can see on you can see name, which is Telmo. Email Telmo at email dot com And the password. 123456 So, basically, we are grabbing the data from our form right now. So let me show you once again how everything is getting connected. We got down here. These routes okay, up dot Use fourth slash That is requiring the routes. So if you're going to routes, we go into pages. We can see that when we go to the Ford slash Registered, we can see in here this form. Okay, now these form I'm gonna go in here into my views register. We got this form and look one thing in here, guys, all these inputs, they have a name. Okay, so the name off the name is name as you guys can see down here on the terminal. Now, the email, it has a name of email, just like on the time. You know, Look the same thing and then the passwords has a name off password. This is what you can see in here. So when you submit this form, you are submitting this form toe off register. Why? A method of post? So we created these route. OK, so if you go in hearing toe our off dot Js okay, which you will grab these router dot post from registered. Okay. If you guys remember in our upto chess, we still have these ap dot use four slash off. So whatever Starts with four slash auth, just like in here. Look, then we go requiring the routes off, which is this one. So in here When we do these router dot post toe register, we gonna learn, We gonna learn we're gonna and load these off controller, which is important up here, and we're gonna load these function called register. So let's go inside of our controllers. Our off. And we got these registered looking here again. Guys register. And now I can actually grab based on these Repressed the request body. So the request body basically is what's coming from your form down here on the terminal. You guys can see these console not log of the request. That body. All right, so now we got these from the form. I don't want to continue with this video now, because just getting too long. So yeah, I'm gonna Teoh finish it in here now. And in the next video, I'm actually going to show you how you can send it into the database. Alright, guys, I'll see you in the next video 7. Register User: All right, guys, Welcome back. So now we're gonna actually send all these data from our register form that we created in the last video. We're going to send all these data into our database. So let's go in here into our off dot Js these controllers. Okay? And the first thing I'm gonna do in here is if you guys remember we did the last time this console. But look to see all the request body, Actually, I forgot to put something I would like to put on my register form. So if I go in here into my register dot HBs, I would like to add an extra input in here for a password. Confirm. OK, so I'm going to copy all of this. Just increase these a tiny little bit. So I'm going to copy this and just base it in here. I'm on my registered at HBs, and now these label is going to be for password. Confirm. Great. And in here, I'm just going to sound the front end corn firm password. The input is gonna be of the type passwords. The idea is gonna be password confirm in the name. This is how you can actually grab it with no Js later on is gonna be password confirm as well. Okay, I'm going to refresh my page. And now I have these extra field because when the user is registering, we just want to make sure that their password is the same. Okay, so they don't accidentally type something wrong, and then they can't log in. Okay, so we got these. Now, let's go back into our, um off dot Js our controller. So the first thing I'm gonna do is I'm going to create a new variable in here and let me see. I'm going to call it. I'm going to call this one, for example. The name. So I'm gonna do const Name equals to request dot body dot If you guys remember, let me try to see if I can make thes next to each other. I can probably do it. Look in our register form. Like I said before, the name of our input in here, which has the name is name. Okay, so I'm gonna do in here. Constant pain equals to request the body dot name. Okay, I'm gonna do const Now I'm gonna do email. He's gonna be equals to request that, bobby dot If I go to my register form, what is the name of these inputs in here? The name is email. Okay, So if the name is email, I congratulate with no jails in here with a request that body dot email. Okay. And then it's gonna be the exact same thing for the password and confirm password. So const password equals to request, not body dot password. This is the name of that input that we got in our form. And finally, I'm gonna create another constant in here called passwords. Password confirm is going to be equals to request that body Don't passwords confirmed, or I guys now, because we actually have the same names of the variables these names that you are creating is completely upto us. Okay. And these names in here, these are the ones that are coming from the form. Okay, now, because these two names look password confirm and this one in here, they much we could actually rewrite these in another way. That so we don't have to write all of these code. So let me see what I let me show you what I want to do in here. So let me just go down here two times. And now I'm gonna do this. Const. I'm going to open some curly braces. I'm gonna put the name, I'm gonna put the email, I'm gonna put the password, and I'm gonna put the password. Confirm all of these in between, these Carly braces is gonna be equals. Two. Request that body. Okay, so these line in here is exactly the same, like all of these. So this is called the structuring in JavaScript. When you have a variable up here with the name is equals to something else in here that is gonna be the same look, requests not. Body is the same everywhere as you guys can see. So we can just the structure it these way. So now I can just use these variable called name, email, pass or impossible confirmed and is exactly the same, like thes. So I'm just gonna delete these. This is just to show you guys that you can do it. Okay, Now that I got these in here, um, I'm gonna start clearing into my database. Okay, So I'm gonna start quitting into my database. So for that I'm gonna do a DB dots. Actually, I actually needs Teoh import my database in here because I didn't imported. So I'm gonna do db dots, Queary. Not sure why this is coming up all the time. OK, db dot query eso what I actually wants to do, um, actually needs toe import these database. So let me see the connection appear. So let's just put like these we need to have our connection. Appears so let's do it. So let's go back to our apt o j s. If you guys remember, we got this connection in here so we could just grab it, okay? We could just grab it, and we could just put it inside, Okay? We got the connection appeared. But remember, guys that we also need to have our my SQL imported. So I go back to my, uh Abdel Jess, I'm gonna import these, okay? So I can just put these on the top. So we got this one in here. We got this one in here. Now there's one thing that I would like to mention to you guys. Is that these cold in here that we have is exactly the same code that we have in here on our upto chest. So maybe if you guys want you could just, like, created on a different file and then you can just import it. Whatever you want. I'm just gonna leave it for now. But I'm just showing you guys that this is possible if you want to. Okay, so now let's go back to our or thought. Yes. So we imported my SQL we created in here the connection. Now, in these register, I'm gonna do a db dot query. Remember, we got thes db appear, which is our connection to the database. And the query that I want to do, first of all is select email. Okay. I want to see, like, the email from my users table. OK, let me just actually opening here. My Okay. I'm gonna go into local host pH me. My admin actually had these clothes. I'm not sure why, So I'm going to go in here. Where is it? Which is this one in here? These database. Okay, No jazz log in and we got in here, the user stable, so I want to select the email from my table users. Okay. Where? The email is equals to a question mark. Okay, so what I want to say in here with this? So this is a my SQL query that we are going to look into our database, so I'm going to select a column of email. You guys remember when we created the stable of users for clicking hearing users and I go to structure. I'm increased the zoom in here so you guys can see a bit better the structure. We have this column of email. OK, so I'm going to select the email from the table users where the email equals to a question mark. So we are doing these kind of positional parameters just to try to avoid some SQL injections. Probably. You guys have heard about these. You can do a bit of research into that. But he's all about security. So we got these in here. This question mark is gonna be the value that we actually want to look for into our database. We are doing these because when someone is registering in your website in your project, you don't You don't want the same person with the same name. Email registering two times. Okay, So one person with one email should only be allowed to register one time. Okay, so after these, I'm just gonna put in here a comma. Okay, I'm gonna put the coma. And now in here, I'm gonna put the value that I want to put in this question, Mark. So I'm gonna put in a right, and now, inside, I'm gonna put the value off the, um I'm gonna put the value of the email, which is coming from here. Look, from up here, we grabbed these from the form from before. Okay, so this and now I'm going to run a function, so I'm going to do a function that takes an error or results. Okay, so it takes an error or results. I'm gonna put the function. Okay. So this is my This is my query into the database. So I'm just gonna increase these a tiny little bit so you guys can see, and now I'm going to say if there is some error, Okay? This is just to show you guys when we run this query and we have these callback function in here, we can have some error. For example, if your connection to the native is not correct. Or if you have something wrong, you will have some error. Or then you will have some results that are coming from the database. So if there is an error Okay, I just want to do a console. So I just want to dio console, don't log of the error. So I know what the hell is going on. Um, if not so if there is no error, what I'm gonna do is I'm gonna do if results is greater than zero. So results, basically, when you grab these results in here is going to come up is an array. Okay, so you want to know how many results you get so to do that, you're gonna do results dot length, okay, because I'm going to show you in a second what these results actually brings. So I'm going to do if results don't Length is greater than zero. It means that is already une male with that volume on our database. What I want to do is I wanted to wear return. I'm gonna put in here a return, so we just keep all the rest of the code that goes down here. We just wanna stop it. This is what the return does. So I wanted were a return of rest dot render and I wouldn't render my register page. Okay. I want to do a resolute rendered with the register page, and then I'm actually going to send a new value inside of these register page. I'm going to send these value of message, and I'm going to say that's email has bean taken or that email is already in use. Okay, I could say this. I'm going to do after else if and now I'm going to say, for example, to check if the password and the password confirm are the same or not so in here, I'm gonna do what else? If if my password. Okay, it is different from the password. Confirm. So if the user was trying to register, but he put both of the past words differently. Okay, Now what I want to do is I'm just gonna call be these coats. I'm gonna baste it in here and now what I want to do is I want to render my register page, but with a message off, for example, the passwords do not match. Okay? Passwords do not match So this is what we want. Okay, if all of these is fine. So if I mean, if nothing of these happens, let's actually just try these. First of all, the 1st 1 is not gonna work, because, um, we still don't have any emails or any users registered in our database. So we're gonna try these in a second. So if this is happening, we send these message if this is happening within these message, so we could actually just go into our register page and find a place where we could put these message. So if I go down here eso into my register, so after everything Okay, this is where the deve with a container starts. So my card is in here, so after the cards. Okay, So after the card in here, this is what I'm gonna put I'm gonna put in here. I'm using the handle bars, the HBs so I can actually use a if statement, So I'm gonna put in here hash if Okay, this is how you doing? If statement with handle bars in these kind of templates, you're going to do if message Okay. If you have a variable message with some kind of content, so these is gonna be either true or false. If you are sending a variable in year called message with some value, this is gonna be true. Okay, so you start a of statement like these, and you close the if statement like thes. So if you have a message, you want to display something in here like H four, for example, with a class of alert alert danger and then with a little bit of a margin top of I think this is, like 25 pixels. If I'm not wrong, these empty four, you guys can have a look into that. And then inside, I'm just gonna boot to the actual message. Okay? If you want to put some variables, look, message. You need to put it in here. These variable If you guys remember. Look, it's coming from here. When we render the page, we send these message with some sort of value. We're going to try these in a second. So if we don't get any of these errors, um, if we don't get any of these errors now, what we can do is we can actually start for a simple hashing the passwords. So I'm going to stop this server. If you want to stop your server from running, you just press control C on your keyboard. And no, we actually need to install something called the be Creeped Js. Okay, so the big rip Js will allow you to in creep the passwords because you always need That's your your users that register on your website. You need to make sure that you in creep their passwords just to keep everything safe. So we're gonna east all be creeped dot Js eso Let me just see. We're gonna do where npm I be creeped Js Okay. So any p m i b crypt? Jess, that's the name of these application. So I'm just gonna east all it. Not sure if we did it before, but if If we did it before, we should already have it in here. Just double check your package. Not Jason. It should be in there. Um, I think there is also something else that I wanna do. Witches I I wants to install as well um Cookie Parsons so we can start using some cookies. Okay, So I'm gonna do npm. I think I forgot about it. So I'm gonna do NPM I I'm gonna do cookie sparser. So we do cookie parcel. And I also want to install the Jason. Where token. Okay, in pm I, cookie Parsa Jason Webb token. And I think that's it if I'm not wrong So let's install these two things, Okay? We should be all goods. Okay, now let's go back to our off dot Js I want East all I want install. No, I want to import first of all my jade ability, which I'm going to show you in a second. Wise it for most jwt, which is for the Jason w tokens. Okay, require, I'm gonna put Jason Webb token, and I'm gonna import as well, my decrypt. So I'm gonna go const be creeped. Look, Isom, some of you sometimes makes them errors. I'm just going to call it in here, be creeped, but the actual package is called be creeped. Oops. I mean, just going here, so be cribbed Js Okay, This is the actual name off the of the package, but you can call it if you want to just be crypt. Okay, Now that we got thes, let's actually encrypt our password. So I'm going to go down here after all these if statements and after this, I just do a little beat of space. Okay, this is still inside of the original DB query. Okay, Look at these final curly braces that are closing down. Everything okay? I'm gonna go in here and now I'm gonna dio let's, for example, hushed hashed passwords. And now this is gonna be equals. Two await. Okay, Because we are using an awaiting here because these process of encrypting the password could take a few seconds more than what the code needs to run eso. We need to make sure that we put in here on the top a sink. Okay, on our function you have in your in a sink, and now you can use the await. So I'm gonna do what? Be creeped. Remember, guys, I'm calling you to be creeped and not be creeped Js because that's how we call it up here. Now, I got these be crypt in here. I'm gonna dio be creeped dot Hush. And what? Well, when a hash, I want a hash. The passwords that we grabbed in here on the top And how many rounds. How many times do you want toe hash? Your password? So this is just the process that decrypt is using to make sure that you can make as many rounds as you want to encrypt the password, Usually by default. A very secure one is eight rounds of encryption, so they should be good after this. I'm just gonna do a console. Don't log of the hashed password. Great. So let's try these out now. Okay, Let's start our server one more time. I'm gonna do NPM start to start the server. Okay. Service south of the report. 5000 in one, my SQL connected. So I'm going to refresh my page. I'm just going to try something random in years. I'm just gonna put password. 123456 I'm just gonna put some random password in here to not match with the 1st 1 to see if we got the error or not. Um, it looks like that something was not working in here because thes actually went through. Um, so let me see where the did we got is wrong. So let me see if it was on my register on my register. I got to the I d. And I got the name. So this part in here password confirm. Let me see if we got something. Oh, maybe maybe maybe it was because on our author chairs, we got these restaurant render okay for each one of these situations. But then down here we are sending these residents. And again, let's just delete this for now. Okay? These red dots and let's get rid of it. So I'm gonna try one more time. 123456123456 I'm gonna breast register. Um, no, it should actually show me something in here. Oh, I see. Because my fault, I should put the wrong passwords again. So I'm gonna put random password, random password. And now, look, I got passwords. Do not much. So these part of the pastors do not match is working eso then we actually wanted to do this one, so I need to do in here for now. Just a rest not sends of, um, testing. I just want to see on the console these hashed passwords, so I'm gonna refresh this. Just reload the page. Let's go back. Refresh the page Okay, I'm gonna put something in here. 123456123456 Register. And if you guys seen here now in the terminal, we got this hashed passwords. So this is what we want. Okay, now that we got these hashed passwords and what I'm gonna do in here is the next thing is start actually adding these into the database. So after these, let's get rid of these rest. Not sent that we don't need anymore. I'm going to do arrest. Uh, no raise. No, I'm gonna do a db dot query. Okay, So these time, what I actually want to do is another SQL, um, query that we're going to do, which is Insert. Okay. When you want to send something into your database, you're gonna do, insert into your table of users. You want a cent? Okay. You want to set something? Okay. Um and then in here, where you put to the set, basically, you put a question mark. Oops. Where is it? You put a question mark, and then in here, you put an object with the values that you want to set. Okay, so in here, I want to put on my database with a column of name. I wanna put the value off. If you guys remember up here, we got the name from our form. Okay, so I want to set the name on the database. This is the first value. This is the name of your column on the database. And the 2nd 1 is the value that you are grabbing from the form appear. Okay, then I also want to put to the email. Okay? The column of email in my database with the value of what I want to put the value off email . Okay. This is also what we are grabbing from the form. The second volume. Finally. Okay, we're going to do this one. The password. Okay, this is the password. And what is the value that you wanna put inside of your database? In here on the password. You wanna put these hashed password that you just created? Okay, so after you have this, Okay, after you have this one in here, you can put a comma and we run. We're going to run a callback function one more time, so these callback function can have an error or some results. Okay, So, like before, what you can do is, if that is an error, you just want to do a consul. Dr. Log of the Error. Okay, if not else. Okay. Else. What you actually want to do is, um, is just putting in here a council vote log or or you could just do for a simple arrest. Don't render like we did in here, so return. I mean, copy these up here with the rest dot render of your register and with a message off, um, user registered, And just before it, I could just put in here a console, the log of my results so we could see it in here on the terminal. So let's see if this is working, guys. Okay, so let's go to our register. I'm gonna put, um, tell more. I'm gonna put Telmo Ott email that calm. Okay, I'm gonna put the password. 123456 I'm gonna put the bus with 123456 and I'm gonna put register. Okay? And I got in here now. User register. Okay, This is a message. And down here on the terminal, I got a non object. I'm not sure if you guys can see. Look on object with the name of Telmo, the email, the password than all of these things in here. Okay, so now what I want you guys to to see East on our database. Let's see if this is actually got to register into our database going to your no Js logging database. Select the table users. And now, if you go in here on the top to browse, can I meet? Just increase the size of these window. Look, we got these user with the idea of one the name of Telmo the email, and then the password completely hashed. Okay, so now, as you guys can see, we got these first user register in the database. Let me actually try to register another user with the same email to see if we got that error from the from the beginning. OK, so let's go to register. I'm gonna do tell more. I'm gonna put Telmo at email dot com which is the same. Okay. 123456123456 Now we should get the nearer saying that the the email is already being used or something like that. Look, it does not let us register again, and it gives us this error of that. Email is already in use. I mean, just to refresh the page, to make sure. And look, there's still just one user in there. Alright, guys. So that's it for this video. Now, we just we we are able to register users into the database, But in the next video, I want to add a little bit of ah featured in here that whenever you register someone, you actually want to place a cookie into your browser so these user can actually just log in straight away after. All right, guys, I hope you enjoy these video, and I'll see you in the next one. 8. Login User: All right, guys, welcome back. So in this video, we're actually going to do our logging. So I know in the last video we did our register so we could register the users into our database. And I know that I said that we could start putting some cookies, but now we're gonna learn how to set up a cookie in the browser using the logging. Okay, so we're gonna do a logging page now. So the first thing I'm gonna do is I'm gonna go inside of my views. I'm going to create the new file called Logging dot HBs. And I'm going to copy my register page. Okay. When a copy, all of it. And I'm gonna baste it inside of the log in. Now what do I want to change in here? This is going to say now, looking for him. Okay. When I submit this form, I want Thies to submit toe off lugging. Okay. I want to submit these to these girl. Then in here, we're gonna have a name. Okay? We don't need the name. Actually, what am I talking about? Way when you log in, you only wanna give the email and your password. So let's get rid of these. Password Confirm as well. Finally, these button down here should not say Registered user, I should say lugging. Okay, now that we got this, let's see if this is working in our front and we go back, I'm gonna go to log in. This is not working, Okay? So we probably need to create a route for that. So if you guys go in here on your laptop Js we got these up that used to require route pages. Okay, so if we go to our routes pages we only have these router don't get when we go to fourth slash register, we load the register file, so I want to do exactly the same thing. So when I go to fourth slash logging on the browser, I wanna render the logging file that I just created. So let's refresh the page. And there it is. My email address, my password in my logging. Okay, so when we submit this form, let me go back tomorrow. Logging dots, HBs. We said that we submit this form toe ford slash off fourth slash logging by a method of post. Okay. Back to our laptop chess. We set up a route in here that it say's whenever you set up a route that starts with a four slash off, you need to goto routes off. So let's go toe routes. This is the folder, and let's go toe off the file. So we need to create in here a route for that in specific. So we're gonna do router dot post, remember, because we are using the post method, and now I'm going to say that it was toe off. Four slash logging. Okay. And what do I want to do in here? I want to load these off. Controller. OK, this off controller that we are importing in here on the top off controller. And then I went to grab the logging function that is inside of it. Okay, These logging function does not exist yet, but we will create it. Okay, Where is this off controller coming from. This is coming from controllers off. So we need to create a log in function in that. So let's go to controllers in here on the left off and where we have these exports register function. Remember, this was our function that we used to register the user now we're going to create a new function called exports dot Log in. OK. And this is gonna be equals to, uh, request response. Okay. Just like before. Um, so now that we got this, I'm gonna put in here a nace inc. Okay? Because we might need to use amazing and awaits like before. So this is just to make sure when we are using this kind of a sink in awaits, basically, is just to make sure that some actions that we do in here, they might take a little bit of time to do so. We need to make sure that the server is waiting for these actions to be done in order to proceed to the next lines of code. Okay, so I'm going to do in here. Try catch. So what the try catch does is we're gonna try a coat. Okay? We're gonna try some queries. If everything goes well, these is gonna run. That is gonna be some error. We're gonna catch it. Okay? This is a simple try. Catch error. Okay. That you can use it in No jails. So if there is an error, I just wanted to a consul. Dr. Log off the error. Okay. If not, we're going to write down this cold inside of these. Try. So what we want to do inside of these try First of all, I want to grab the const. Okay. Name? Sorry. Not name email and password from the request dot body. Okay, so this is exactly the same thing like we did on our register. I'm grabbing the email and the password from the request. That body. Now, after what I want to do in here ISS if for some reason, someone is trying to submit that form without an email or without a password. So how can I do in here in these if statement, I can dough, if not email. So if you have to remember, these exclamation mark is like the opposite sign. So when you have a variable with some kind of value, these variable is true. Okay, So if you have a little bit of a string, for example on an email, if you got some text in there, the variable is gonna be by default. True, because it has some content. If the variable this one in year comes undefined or no or whatever is equal. It comes false. So if this is empty, it means that this false Okay, So false. What is not false? Something that is not false is gonna be true. Okay, so if this is gonna be true that there is no email, we want to do something. I want to do exactly the same thing with the password. So if there is no email or there is no password, Okay, I want to do, uh, return. Why am I doing these return? If you put the returning here, it means the rest of the code after is not gonna run. Okay, Is just going to stop right here. So I'm gonna do a return in the rest out status of 400. OK, this is for the forbidden coat. And I want to render I want to render my logging file that we just created. And inside I'm gonna put in here a knob checked with the key of message. So we got the same variable like before message and I'm going to say please provides on email and password. Okay. So if someone forgets to put something in here, we're going to give them things kind of error of please provide an email and password. Actually, let me let me see if this is working. So I'm gonna put something in here, and then I'm just gonna put nothing in here. I'm gonna click, actually is requiring me to put some at email. This is from default. This thing from bootstrap. Look, I submit just the email without any password, and he's telling me please provide an email and passwords. Okay, so this is all working fine. Now, we got these protection of these. If statement, then what I want to do in here is I want to do with DB dots. Query. Okay, so I want to do a query into the database, and the my SQL query that I want to do in here is I want to select, and I'm gonna put in here the star. What these Select Star means is we're going to select all the columns from the database, So let's go in here to the users. I'm going to the structure. Appear we got to select these column of i D. The column of name the email in the passwords. Okay, We're gonna select all these columns from the table users. Okay, so where the email is gonna be equals to question Mark. Okay, we're using these positional parameters again to make sure that we were safe against these SQL injections. So now what is the value for this question mark value for this question, Mark, I'm gonna put a comma in here an array. And now the value inside is gonna be from these email. Okay, this is just to make sure that we are grabbing these, um, person from the database so after you wouldn't run a a sink function, so request response. And now what do you want to do in here? Sorry. This is not the request response. This should be Andrew Ward results. Okay, Like before we got an error or some results when you are doing this query into the database . Okay. Now that we got this, what I actually want to do is let me see. I'm gonna dio if Okay, so if that is no results Oops. OK, so if you are not finding any user in the database with that email or you gonna do, uh, no, wait, okay? And the weight of what of our comparison with the password that the user put in here. Okay, so usually I'm gonna put in year a weight. Be creeped dots compare. Okay. When you do these, be creeped. Compare. You are comparing the password that someone is actually typing it down. Now on the log in with the password that is on the database completely hashed. So you need to use this function called be creeped. Compare. Okay. And in here, you're gonna put there passwords. Okay, This is from the logging the person that is typing it down. You need to grab it with the results. Zero. OK, these results is what is coming from the database, and you want to grab the first result because hopefully, if someone is logging in with an email, that is only one email in the database. So you're gonna do results zero dot password. Okay. So what we want to do in here is if these two, if this thing in here matches, it means that this is true. OK? But you actually want to check in here is if there is no results for the email or if the password that these users typing down is wrong. Okay. So to see if he's wrong, I'm gonna put it in here. All in between this and I'm gonna put in here the exclamation mark. OK, so oops. Like this missy s. So we got this from here. Hopes I just missed it. Where is my code? So we need to go up here. Think I have a next ra? Yeah, I think this should be fine out. So if there is no results or if the password from the user is not correct, Okay. What I want to dio is I'm going to send, uh, rest. Don't status of 401. So these state is in your 401 is forbidden. So if you are trying to log in, but you are not giving the correct details, you just give these status code of 401 and then you're gonna do the render. You're going to render the logging file, and you're gonna pass in a message. So the message that you want a passing here is the email or the password is incorrect. You don't want to tell the user which one is incorrect. If is the email or the password, just be vague. So you're not helping them tryingto hack your website. Okay? So just do something like and email or password is incorrect. Okay. I don't need a question mark in here. Um, let me just see. Looks like you got some error in here. Unexpected token. Online 23. So I got these in here. We got these no results. I actually miss another parentheses in you. They should be three of them. That should be three of them. I think this yet. This is now all good. Okay, so make sure that you got these, like these. Look so Russian Mark open Prentice's await big ripped password. Look, that is actually to parenthesis is closing in here with this to in here. And then you got the final one in there. So before this, if statement, I'm just gonna do a console, not log of these results. Okay? Just so you guys can see it in here on the terminal, let's try to log in. So I'm going to refresh the page. Okay? I need to go to register logging Appear. So what was my email Telmo on email dot com. I'm gonna put the random password. I'm gonna do a log in. Okay, so email or password is incorrect. Okay, So as you guys can see down here, my results is this okay. Is an array with these value of I D. Name, email and password. So that's why when we got these results zero, this is the first result. There is only one, and then you can access things like the dot name dot email ordered password like we did in here. Okay, so we checking if the email or the password is incorrect. Um, if everything is OK, so we're going to do in else And what you want to do is you're going to create a constant I d equals two results results zero dot i d. And now, after you do this, you want to go? We're going to start with our JWT tokens. This is what's gonna help us, um, start putting the tokens in our cookies. So I'm going to do in here Cohn's token. So every user, when they log in, we can create a unique token. So a unique token is gonna be like a long string of numbers, almost like this password hash down here. OK, so it's gonna be J W T don't sign, okay? And we're gonna sign these with the user. I d which is thes up here. Okay, So obviously we want we should put in here the i d of the user. This is what we need to put in our JWT. And the value is these I d that we are grabbing from the database in JavaScript. When you have an object with the same key and with the same value, you can actually short these up, just like thes. Okay, If you want, you can just leave it like that, okay? I'm just gonna shorten it because it's just easier in yet. So you're gonna do a jwt dot sign in here? You're gonna pass the i d of the user. Would you just grabbed from before? Then you're gonna do a process. Dots envy. Got J W T Secret. Okay, so these partying here is whenever you are trying to create a unique token for a user and you are using these j JWT tokens, you actually need to pass your kind of secret password if you want to. We store these in our environment file with this variable called JWT Secret. Okay? So let's go in here toe our dot envy. I'm gonna create these J w t underscore. Secret is gonna be equals two. My super secret password. Okay, these passwords is what we need to create these Tokcan. Okay, so after this, we actually need to say when these token is expiring. Okay, So put a comma and then put in here an object. And now you're gonna put in here when this is expiring in, so I'm gonna put expires in. And now I'm going to say when this is going to expire, I'm gonna put in process dots, Pete n v dot J W T expires expired years in. Okay, so let's create a new variable for these. JWT expires in an hour dot e n v. And now where this is going to expire, we can usually do that. Our cookies, they expire for resembling 90 days, which is like, um, it's like, three months. So 90 d, if you put lengthy is 90 d. Ok is going to be like 90 days. Okay, now we are creating the token. We should actually be able now to start the cookie. So where was my thing in here? we created the token. Okay? We created the token, which I'm actually going to do a console. Don't log off the token. I'm gonna do in here a message saying the token is okay. And now I'm gonna put in here the actual token. This is just to show you later on how is gonna look like your token. Okay, now that you created the token, we want to set this token into our cookies, so I'm gonna create the const cookie options. Okay, This is just to give a little bit of options in our cookie. I'm going to say that my cookie is gonna expire, so expires into a new date. And now, what is the new date for these? Cookie I'm gonna put in here. Date docked now. So these dates dot now is your current state. Okay? Plus, I'm gonna put in here process dot e n v dot J W T. Cookie expects pyres. So we need to set up these value into our e n v to se how long this our cookie lasts for, So I'm gonna go in here. I'm gonna put these equals two, and I'm just going to say as Well, that this going to be 90 days. Okay, look, this is different in here on your JWT for the token, you need to put the number of days. So 90 D in here for the cookie. You just need to put 90 as a number. Okay, so these cookie options is going to be the current date now, plus these number, which is gonna be 90 for the 90 days. And now you need to actually convert these into merely seconds. So to do that, you're gonna multiply these in a day. There are 24 hours, and then, um, in an hour there are 60 minutes, and then in a minute there are 60 seconds, and then in one second, there are 1000 milliseconds. So this is all our cookie options. And finally, we want to make sure that we can only set up our cookies if we are on a http on Lee environment. Okay. She's just to make sure that it helps you was well with some kind of hacking. If someone is trying toe mess up with your cookies, you only let them. If we are on the http Onley browser method. Okay, I'm gonna put it in here. True. Now, finally, after these. What I'm gonna do is I'm gonna do arrest, not Cookie. This is what is actually going to set up our cookie in the browser. So it's gonna be J W T. This is the name of my cookie. You can put any name that you want, but I'm just gonna put this one so this and the value is gonna be the East Oaken. Okay? And then finally, I need to parts these cookie options with this kind of expiring. When does it expire? And so on. So in here, we set up our cookie. Finally, after the user has bean registered and we put sorry. After using has been logged in, we put a cookie in the browser, and then we're gonna put in here the rest dot status of 200. So everything is fine. And we're gonna re night act our user too, to the home page. Okay, I'm going to redirect the user to the home page. All right? Now that we got all of these, there is only one thing left, which is we actually need to start our cookie. Remember that in the last video, we install this cookie parcel package. Okay, so we need to go, um, to our abdo chess. We need to import the cookie parcel appear. So just after these, I'm going to go in here, and I'm gonna put uh, const. Cookie Sparser is gonna be equals two. Require Cookie Parsa. Okay, this is how I call it. And this is where I'm importing it from from that package that we just installed s So we got this one in here and after these expressed or Jason. Okay, I'm gonna do it up. Don't use off the cookie parcel cookie part, sir. Okay. We are actually initializing these cookie parts is so we can set up cookies in our browser . Okay. I think that we got everything ready to see if we can do a log in, and if we can set up the cookie, Let me just open in here. I'm going to right click on the page. I'm going to do an inspect. Okay? I'm using Google Chrome, but I guess there's gonna be very similar if you are on on a Firefox or Ah, or Internet Explorer is going to be very similar. I mean, just increased. Zoom in here a bit more and I'm going to go. When you guys opening here, these developer tools you can right click on the page when inspect toe open it, or if you press f 12 on your keyboard, I think that's the key. If I'm not wrong, I want you to go in here What? It says application. If it's not in here, click. And here in this arrow and you should be able to see an option for application. And then if you scroll down here, that should be wanted to say is cookies and click in this one that it say's http local host . Looks like I already got a cooking here, but I wanted elated to the latest cookies. I'm just gonna click in here the late So now there is nothing. Okay, so let me actually increase these a bit more. Okay, let's try to log in. So I'm going to go in here. I'm gonna try to log in and see if I actually see some cookie in here. I'm gonna put Telmo at email dot com I'm gonna put 123456 That was my password. I'm gonna press log in and look, I was redirected to the home page, okay? I set up my cooking here with name of JWT and the value of the token that we created before . Look, I'm just hovering it in here. You see these big string? This was the token that we created. All right, so if you see it down here on the terminal as well, the token is you got all these. So basically, that's it, guys. Obviously, we just did the first step, which is putting the cookie in here on the browser. Now, in the next video, I'm gonna show you how you can use these cookie toe. Keep your user logged in and tow. Basically, just allow users that have this kind of token toe access some pages. Right, guys, I will see you in the next video. 9. User Profile Page: All right, guys, welcome back. So in the last video, we created our logging and we set up our cookie in the browser. So now we can actually test these by creating a page that should only be accessible for users that are logged in. So let's just create now, a page could be, for example, for the profile of the user that is currently logged in. So let's create this page. I'm going to go inside of my views, and I'm going to right click. I'm gonna greet the new file for, um profile dot Js. Okay, so these Sorry, it shouldn't be profiled R J s. It should be profile dot HBs because we're using handlebars to deal with them with these files in here. So I'm gonna copy, for example, my, um I think if I copy in here these logging, we can take a lot of things out of here, so I'm going to copy everything from the log in. I'm going to go to my profile. I'm gonna paste it in there. Obviously, there's gonna be a lot of things in here that we need to take off. So let me just see first thing I'm not gonna need any form off course so I can delete all of these form. Okay, Um what else? What else? I think I don't need any of these message for now, Grace. Why ever Deve, with a class of container and empty four. And then I got a card with a heather and with the body. So this is fine for now. So I'm just gonna create first of all and leave with a glass of rope. So this is a bootstrap class. It's OK. So it's almost like a square around everything that is going to wrap everything. So I'm gonna put the deal with the class of rope and inside of these diva with a class of row, I'm actually gonna put two columns. I'm gonna put one Dave with a call of four. Okay, So if you guys never used bootstrap before, Basically, when you do the school for bootstrap as agreed system, that is about 12 columns in a row. So I'm gonna put one column with four spaces and the other one is going to be with eight. So eight plus four, it's 12. That's how much columns you can have on on a row in bootstraps. I'm gonna put in here eight and you guys will see in a second. How does he look like? Okay, now that I got these road look, starting here and closes down here inside of these Deve with a call of four. I'm actually gonna put these leave with a class of card and the kind of habit in the card body. So I'm just gonna copy all of these codes. Okay? I'm gonna based inside make sure that everything is nicely and indented. Okay, Thing that's it. So leave class four finishes in here, okay? I have these kind of extension that is clicking me when I click is just telling me what's matching. I'm not sure What's the name? Let me check if in here. If I can give it to you guys as well. Ah, the of line server. It should be something like matching brackets. If I'm not wrong marching, I think is this one highlight matching talk. If you guys want just, like install these feel free. So this is when I click. I see when when it starts. And when it opens. So got my cards. Ok, so now what I want to put inside of my card inside of my card. I don't want to put right now thes card heaven, so I'm gonna delayed it. What I want to put in here is a div with a class of of Aton cdn, which is short for container. Okay. And inside of these, I'm gonna put an image. Okay, I'm gonna put an image with the source of something, and I'm gonna put in here with a class off of a time, okay? And I can put in here annulled as well. So just if the image is not load, weaken this place a message. So I'm gonna put in here user profile picture. Okay, so I got this one in here inside of the body. I'm not gonna put nothing, but now I'm gonna put in. Imagine here. Okay, so where am I gonna grab these image? Just before these videos started, I actually went in hearing to my public folder, and I put these picture in here called avatar dot PNG. Okay, this was just every random profile user picture that I found on Google. I just put like, avatar PNG and something like this came up So as you guys can see all of these things in here, that he looks like a chair sport. This is, like, transparent black background because we're using a dot PNG file s. So this is what I will be using. You guys can just go on Google and download something similar. I think you should have the files in here if you want to use the same like me. And OK, so now to access these image avatar got PNG, I'm gonna put in here four slash If you guys remember when we set up our no jazz in the beginning, we said that when we start with a four slash, it goes to the brook to the public profile to the public folder. Sorry. So I'm gonna put in here four slash avatar dot PNG. Okay, let's check if this is working. Um, I'm not sure if I set up, let me just see four slash profile. It does not exist. So we need to create actually a route for these toe work. So to create a route, we're gonna go into our app. Thaci s if you guys remember our app. Thaci s starting here with these route of anything that starts with a slush. We're going to go with a required the routes page. So let's go into routes pages. This is where I want to put this. Um, so now in here, what I want to do is I want to do Ah, I'm actually gonna put it down here. I'm gonna put the router dot get I'm gonna put the get method because this is the method that you use when you load the page on a browser. So when I'm going to fourth slash profile on the browser, what we want to do, I just want to run a function that takes a request in a response. And for now, the only thing that I want to do Sorry, this is not the dot. It should be a comma. The only thing that I want to do in here is just to arrest. So responds dot Rendall and what I want Orender. I want to rent that these profile file that we just created. Okay, so I want to render this profile. That's the only thing that I want to do. So let's see if this is working. I'm gonna go up here I'm gonna do a profile and look, I can see my image. That's fine. You know, at least we are loading it. We know that we have some CSS to apply and everything, So I'm gonna go back to my profile. Where is it? My profiles. I'm just gonna go in here is easier. Okay. In here. I got my image. Finally, I want to put something inside of the body. So what do I want to put inside of the body? I want to put an H five and inside of these h five, I'm gonna put the class off, uh, cards title and in here for now, I'm just gonna put the name of these user, which is gonna be hard coded, but after is going to come from the database, I'm gonna show you how right now we're just building the simple A static file. So, John Doe, Then I'm gonna put a paragraph with the class of card text, and now I'm just gonna put in here some random text, which I'm just gonna copy, and I'm gonna show you to you. This is just, like, really a random text. Look. Some quick example. Text to build on the cards title and make up for the bulk of the cards content. This is actually coming from a bootstrap. If you guys remember eso after this, I'm just gonna put in here. Ah, an anchor element. Okay, I'm gonna put a new anchor element. I don't need this target blank. And I don't need these relationship. Okay, for now, this is not going anywhere. So I'm just gonna put in here the national and I'm gonna put in here the claws off Bt n bt n primary and finally in here. I'm just gonna put, for example, that use that email, so he's gonna be john at email dot com. Okay, so I think that we have everything that we need in here. Let me just refresh the page. We got John Doe. We got some text, we got the email. Um, and we got the picture. So let's put some CSS to make sure that this is all looking a bit better than what it is at the moment. So I'm gonna go to my CSS where it is in style dot CSS. So if I go into my style, not CSS, The first thing that I want to dio iss. I want to grab my avatar continent, Avatar city. And if you guys remember, I want to set the background Caller two orange. So, basically, this is just to set up the background color in here behind the profile picture. Okay, as you guys can see. Look, this is where I'm gonna put my profile picture. Then let me go back to my profile. Okay? So this was the avatar container. This part. You see, this is the deep that wraps around the image. At the moment. The images to big look is getting out of the container. So how can we fix that? We can just grab the image, Okay? My image hairs, a class of avatar. Do you guys remember when we put this class of Avatar? So I'm gonna put in here? Avatar, I wanna have a with of 65%. Okay, so these 65% is gonna be obviously off the parent element. And as you can see now is looking much better. So we got these now we could just put, um we could basically just put in here a background call a border around, so I'm just gonna put this board there. Bottom is gonna be one pixel solids, and then I'm gonna put in here rgb a So this is so we can use callers. And Alfa transparency is gonna be all black. So 000 and then I'm gonna put in here 0.125 Okay, this is just the percentage, and that's completely fine. Now, one thing. Let me just put some zoom in here so you can see it better. One thing that we want to do now is just like centering these, um, this image in here because not centered. So let's do this. Let's go back in here and inside of these avatar container. Let's just put the text align to be center. Refresh the page and deputies. So he's looking all goods. Now we miss thes second part in here, which each waas this part in here. The call eight. Okay, So what do I want to put inside of this card of this? Call eight of this column. I want to put a different with the class of Kant and another one of text. Send the Okay. So this would be card. This is all bootstrap. classes that that applying already some styling and here so you don't have to do everything . Then I'm gonna put in era Dave with a class of kind of heaven and inside of these kind of heaven, I'm just gonna put a profile page. Let me see. How does it look like profile page? Awesome. So looking good. Now, after the card heaven, I'm going to create a diva with a class of card body. Great. And inside I'm gonna greed in h five with a class of card title. And in here I'm just gonna put some random text. So I'm just gonna say, Hey, John, welcome back. Let's refresh. Hey, John, welcome back. After when we actually start using our tokens to keep the user logged in, all of these things will come from the database. So we don't need to hard code days. I'll do it in the next video now, just creating the static files. So the next thing that I want to do is just copy this. So after these h five, I want to do a paragraph with a class of cards, text and inside, I'm just gonna put some random text, okay? And These random text is just saying this is your profile page where you can have all the information about yourself. Okay, I'm gonna refresh that. It is. We got some text now. The next thing is, let me go back in here. We're gonna add a bottle in here, So, uh, anchor element. This is not going anywhere for now. So I'm just gonna put in here the class of BT n BTM dash primary and in here, I'm just gonna put a button that says go somewhere. Go some where? Okay, so it looks like b t n. Okay. I misspelled that. Okay, so we got this, um, And after, I'm just gonna put in here after this car, the body, I'm gonna put the diff with the class of card dash footer, and I'm gonna put text muted, I think is to give it a little bit of grayish. And now I'm just gonna put in here Note my SQL Dash Project Refresh and Entities Look Profile way a John. Welcome back and everything. So this is gonna be our profile page and we want now we just created. Now we want to make sure that Onley users that are logged in, they will be ableto access this page. So that's exactly what we're gonna do in the next video. Alright, guys. So I'll see you then. 10. Private Pages: All right, guys, Welcome back. So now we are going to protect our profile page that we just created Toby Onley accessible by users that are logged in. So the first thing that we will do is you guys remember when we created the routes. Okay, So the routes starting here in your app, Thaci s. So we said that whenever we go into getting toe up dot use four slash, we're going to require these route pages. And if you're going to routes pages, we get this one in here router dot get profile, and then we render the profile. But what we want to do is to make sure before we do these rants that render we actually do a check if the user is logged in, how can we do a check if the user is logged in or not? We need to check. There is a token, and we need to make sure if these Tokcan corresponds to these user. So we're going to create something that we called a middleware. So these middle wearing here that we're going to create, I'm gonna put it just in here after the URL and before these requests response Okay, So I'm gonna put in here comma, and I'm gonna put off, okay. Where is it? I'm gonna put in here off controller. Okay, so the off controller, if you guys remember, we need toe import it in here on the top. Okay, so I'm gonna put const off off controller is gonna be equals to require, And I wouldn't require these from where I need to go one level up, So I'm gonna put Doctor. I forgot to put the single quotes around guy. So I need to go one a level up. That's why I do dot dot four slash i need to go inside of controllers, and then I want to go inside of the auth dot Js okay off. So basically, I'm just importing these file off the jazz inside of the controllers. Then I want to select a method of function from there called dot is locked in. Okay, let me put another comma. Okay. So I'm gonna show you one more time when you go to these u r l of the profile before you render the file, we need toe due to run this function that these inside of our off controller What is the oath Controller? Appear? Basically, this is just importing these file of the oath dodges and then insight You want to run? This function called is logged in. These function does not exist at the moment, but we will create it now. Okay, so now I'm gonna go inside of my author. Che s inside of the controllers, and I'm actually going to create thes function. So down here, what I'm gonna do is I'm gonna create these function called exports. Dot is, uh, is locked in. Okay. And this is gonna be equals two anay sink. Okay, I'm gonna put any sink in here, because just like I mentioned before, there's gonna be some things that they might need a nation can await. So I'm just gonna put it in here. So I need to have in here a request I need to ever response. And I need to have something in here called next, and I'm gonna explain in a second. Okay, So basically ah, where is my I'm going to save these. I'm gonna get three of these dot e N V. I wanna have next to these my routes, um pages Think is this one. So I'm gonna put it in here. So when we go to the URL on the page, we're gonna run these middle well, and then we're gonna do render the actual page. So just to show you on this is pages. This is routes route controller. Okay, I want this one in here just to show you what this is doing is I could if I want creating here, request dots. Message equals two inside. Medial wet. Okay. And then you need to call this function next. So let me go back in here toe the pages. So when we go to them when we go to the u. R l profile, we're gonna run these middleware off. Controller is logged in. So what is this controller doing right now? We are just creating a variable. Okay? Inside of our request, we're gonna create the variable called message. Then these messages gonna have the text of inside middle Well, and then we need to call these next as you Gaskin sees inside of India of dysfunction. This is just to make sure that we can go after the middle where we can go next. What we do next, we just render the page. If you guys don't put these next in here in your middle where your function just stops, okay? You need to make sure that after you run your middle well, you call these next, okay? In here in the end to make sure that, then you go in here and you render your page. Now, what I want to show you is when we go to this function after our middle Well, now we should have available to us. I'm gonna do a console. That lock of request, not message. Okay, look, thes request us. That message is coming from our middleware. Okay, let's just see if we are passing these or not. So when I'm refreshing the page, look what stays down here. Okay? Inside, middleware. So let me explain. Just one more time. When I go in here to four slash profile this one, I just refresh the page. For example, I'm gonna go inside of these middleware off. Controller we imported on the top. We're gonna run. This function called is logged in. So these functions is logged in its in here and what this function is doing, we are creating a very well called message. So we need to do request dot message. And this is the value of it To make sure that we can go now to the render of the page. We need to call this function next. Okay, this is after the request response. We need to put these next. So in here. What the next is making us do? Okay, we finished the middle. Where now we can go next. We can go and render our page. Now in this section, I can actually grab these variable from my middleware. So request, Look, message. We can create as many variables as you want and what with whatever names you want. And as you can see just before I render the page in here, I'm doing a consul. That look of the request message. Look inside, middleware. That's it. Okay, Now that we cover these, we can actually start with some more events, things. So I want to doing here. Let me just leave the next down here in the end, and let me just delete these console that log of requests message because I was just showing you these to explain. Now the thing that I want to do is to make sure that the user is logged in. I'm gonna put the console. That log of requests. Dots, um, cookies. Okay, so this consulate log of requests that cookies is just checking if you have any cookies on your browser. Okay? Because remember when you log in and put a cookie in here on the browser. So when we do these requests that cookies is just checking if you have something. So I'm going to refresh the page and look, I got a cookie coming in here on my terminal gentility and then all these value Okay? After What do I need to do? I need to do an if statement I need to go in if if request dot cookies dot j w t. Because look, when you have a cookies on your browser, you could have multiple cookies. We just want to grab these JWT. Okay, That's why we are doing if there is a cookie with the name of the JWT, what do you want to do? I'm gonna do a try. Catch in here. Okay. I'm gonna do a try and catch. The first thing I'm gonna do is I'm gonna dio Const. Decoded. Okay, And now in here, these decoded we're gonna decode all these Tokcan to make sure that we grab the idea of the user that we are trying to log in. So for that, I'm just gonna do in a weight off pro me C five because these returns a promise. And basically you just wants toe to solve this promise. So you're going to use these function called promise if I which you actually need to import on the top. So if I go in here on the top, you went into a const. Draw me see by and you're gonna do required okay from the Util library in here from no jazz . So you're gonna import these promise if I from the Util library of No Js And now if I go back in here, you do a constant decoded equals to await promise. If I and so what you need to do with this promise? If I you need to check your j w t dot verify. So this is a function from the J J ability Web tokens. That is just checking this token. Okay. And what you want to do in here is you want to check two things you want to check? First of all, your request dot cook is dot j w t And see if I can just wrap this coat and then you need to put a comma. The next thing you wanna check is that, um, the secret password that you used when you created the token in the first place. So I'm gonna put in here raw says dot e n v dot J W T secret. Great. Just put this in here. Um, I think this is fine. I think this is fine. Let me just organize these a bit better. So Const Const on And I think I don't need these. So this one request something is wrong in here. I don't think I need request, not cookies, that dale ability. And this should be in here. Okay, this is because I'm just wrapping the text. I mean, just not rapid, because otherwise Okay, so you got the cause of the weight promise. If I You are using the jwt dot Verify. This is a function from JWT. You are putting inside your request cookies of jade ability, and then the second parameter is the password that you use to create the token in the first place. Okay, now that we got to this, I'm just gonna do a consul dot Lock off the decoded. Okay, this is just for us to see what's going on. I'm going to refresh the page. Um, let me see. Should something come up in here. So you got the const. You got the decoded. But where is it? Is no working. Let me see. Five. Forgot something. I guess this could be just like a small problem with our JWT Web token. So I'm just gonna delete thes and I'm gonna trying to log in again, and we will see if this is working or not. Okay, so I'm just gonna try into a logging I'm gonna put, I think was Telmo at email dot com. And the password was 123456 123456 I'm gonna press log in. Okay, So yeah, I think now this is working, as you guys can see. Um, okay. We got all of the stuff. My token is and I should be able to do, um, consul dot log of the decoded. Okay, so Let me just put in here. Console the log of the error to see if there is some error or not. I'm going to just refresh the page. Oh, I see what might be the problem, because not on the profile. Beija up here, So I need to go forth. Launch profile. Now I'm on the correct page. All right, So if I try, I'm just increased is a bit if I tried to refresh the page. Okay, I have. These are now. Everything is correct. Look, let me just comment. Thes consulate longer of my cookies. So if I refresh the page, I got my decoded. Okay, So the decoded I got to the i d of the user who is currently trying to log in. And this is when the password was issued at and this is when the not the password. When the token when the token was issued at and when the token is expiring. Okay, so these i d is the i. D of the user was trying to log in. Let's go into our PHP, my Haveman. And look, This is the idea of the user who is currently trying toe log him so This is amazing. This is what we want. Okay, After these decoded, we're going to start checking if these use that exists on the database or not. So I'm gonna put in here to comment, saying something like and so up here, I'm just gonna put one step one. Ease. Very fine. The token. Okay, this is just make sure that the token exists and we can see which user is is this talk? And from then I'm going to do a consul. That log of the decoded, which we did. Then I'm gonna do what? Check if the user still exists. Okay, so for that, I think that we imported yet we imported our connection of the database. Appear so down here again. I'm gonna do so. This is Step two. I'm gonna do a db dot query. And what's the query that I want to do? I wanted to a select goddesses, some my SQL statements in here. I want to select all the columns. So when I mean all the columns is I want to select the column of i d. The column of name, the column of email and password and so one. All the columns from the table users that we created initially. Look, this is the table users, okay? And I need to put a conditional in here where the i d of the user is gonna be equals to question Mark, remember that we're doing this positional parameters for security reasons, then in here in the second volume. This is where I actually gonna put something that is going to replace this question Mark. So I need to put on a great and inside of these array. Now, I'm gonna put the value of it. So remember when we did this council that log of decoded? I want to rob the decoded dot i d. Okay, this is going to give me the idea of these user so decoded dot i d Look at the terminal guys is down here. The answer decoded. This is our consulate lock, and you want to go inside of the dot i d. Because this is an object. Okay, we got these. And after you need to put another common run a function that is gonna either have an error or a result. Okay, Now that you run this, you could just do a consul dot log of the result. This is just for you to see if actually something is coming up or not from the database. So refresh the page and look, Our result is giving us a user with the idea of one with the name of Telmo email and password. Okay, So perfect. This is what we want. But now we're just gonna do some safe, safe, um, statements in years. So we're going to do if that is no result. That's why I'm putting in here these exclamation mark. Because if there is a result, it's true. If there is no result is gonna be false, Okay? So if there is no result, I just want to do a return next. Okay, So if there is no result, I just want to go inside and render the page, okay? But we do is we're gonna do some some things toe to save that after So then what I'm gonna do is now I'm actually gonna create my, um I'm actually going to create my variable, and I'm gonna create these. I'm going to call these variable user, so user is gonna be equals to my result. Okay, This is what's coming from the database, and I just want to grab the 1st 1 Obviously, if you has remember, from down here in the terminal, we are just grabbing one. But, you know, you just need to go inside of these, right? Because this is an array and grab the zero value. So this will give you access to things like the i. D. The name and so on password and so one, then. Okay, what you're gonna do is you want to do a return with the next, Okay, When you do the return, it means that your code will stop here. We'll just go to the next thing. Okay, so return next and okay, Finally, if there is some error, I also just want to go to the next thing return next. And finally, that is one thing else which, if you try toe, come to this page, remember, this is our middle were running. We checked initially. If there is a request Cookies if we have a cookie with a jail ability. So if there is, we do all of this coat. But if not, you need to live in here the next anyway. Okay. So I think that now we have everything that we needed. Now the next thing that we need to do is going into our pages. Was it pages? Yeah, we need to going to our pages, routes, pages that Js And in here now we should be able tow have in here and the variable of request dot user. So I'm gonna go in here. I'm gonna dio if statement if there is a request user. Okay, so if there is a request, use it. It means that we checked the token. Everything is fine. And we grab Sorry, we grab the user from the database. So if there is a request user, what I wanna do is I want to render the profile page, okay. Else, okay, else. I just want to rest re diet ect to the log in page. So if someone tries to go to the profile page and there is no token, they don't have access to it. Basically, we're just gonna redirect them to the log in page. So let's try these out. I'm gonna go in here. I'm gonna delete these Tokcan. I'm gonna try and refresh the page. Look, you redirect me to the log in page I'm going to show you one more time. I'm gonna go in here. I'm gonna do a profile, try to go to these u r l and it does not let me go into the profile because I'm not logged in. I don't have the token. Now I'm going to try to log in. Okay? I'm gonna put Telmo at email dot com I'm gonna put 123456 I'm gonna press looking and look , I'm on the home page. If I tried to go up here to the profile eso something is not wrong in here because it's not letting us go. So, um, let's just figure out what's wrong in here. Oh, I think I might know what can be the problem if we go to our off dodgy s when we have these next. We don't want these next to run all the time. Okay? So if there is cookies, we're gonna run all these code until appear. If not, we need to do a nails statement and the inside of these else statement you're gonna put your next. Okay, I think this was our problem. So let me just refresh the page and as you guys can see. Now we are. We are able to get inside of our profile page because we are logged in. We got the token. Okay, so, home page, if I try to go toe profile is all goods. Let me just get rid of the token. The, like, the token. Try to refresh the page. We are redirected to the logging. Look, I'm gonna go to the homepage logging register. If I try to go on to profile, remember, I'm not logged in. I'm gonna put pro file. It just redirects me to the log in. If I do log in now and I put the cooking here, I'm gonna put Telmo at gmail dot com Password. 123456 I'm gonna press log in. Okay. I was redirected to the home page, but now if I try to go up here profile, I can go to the profile because I'm logged in. All right, so now it's just quickly going here where we have these places of the John Doe, the email, and so on. Let's just put the details from our user. So for that, remember when we went in here into our pages. We can actually pass these variable of request to dot user inside of our profile page. So how can I do that? I can just go in here. After rendering the file of profile, I can pass a variable insight called, for example user, call it whatever you want, but I'm going to call it User and user is gonna be equals to request dot user. Okay, so if you guys remember these request, that user will have dot i d dot name dot email that passwords. So one okay. And I can use it as user on my profile. So if I go in here into my profile now, instead of John, I'm gonna put in here double curly braces. Okay, This is how you can use it in handlebars. I'm gonna put user. This is the name of Variable that we just created dot name. Okay, so, um, this is fine. Then what else I'm gonna put in here, You see up here instead of John Doe? I'm just gonna put in here. Um, okay. I'm gonna put in here. Um, user dr name on the email. I'm gonna put user dot email user dot email Let me see if I forgot something. Okay. What? Tell motel more email. That calm. We got hate Elmo s. So everything is fine. Now. There is one last thing that I want to do quickly before we finish this video is all these links appeared. I want to make sure that if the user is logged in, we don't see these blogging and registered anymore. Okay, I want to see the user is logged. Logged in or not. Okay, so for that, I'm gonna go, um, into my profile and in here on the top. Let me just go in here, guy. So all of these things in here I want to make sure that I just see, for example, um, in here, I should be able to see 1/4 slash profile. Okay? And I'm gonna put in here profile and in here I'm gonna put off log out, and I'm gonna put in here. Look out. Okay, so I'm going to refresh the page now. I haven't had a profile, which, if I click, it goes in here, and that is going to be a log out. This is gonna be our next video. Okay, we got this parts. Now, let me just go into my home page so into my home page. I also want to pass these requests off the user. So for that, let me just see for that. I'm just gonna go in here into my pages. And where is it? I'm gonna put in here on my pages on the fourth slash. This is our home page. I want to put the middle Where as well. Okay, so I'm gonna put the middle where In here? The same one. So if we get the request, don't user. Okay. I'm gonna pass it in here as user requests dot user. So if the user is logged in, I'm gonna go into my index, not HBs. And down here, I'm just gonna do any statement. Hashtag if this is how you do any if statement in handlebars, if the user is logged in and you got to these variable what you want to do is you want to put an ally, I'm actually just gonna copy this. The user is logged in. You want to create a profile, okay? And I'm gonna put in here as well the log out. So it's gonna be toe off ford slash log out, which will create in the next video. Look out! Okay, so this is your if statements, and then we're gonna put else it means that if the user is not logged in, what do you want to show? I want to show the logging and the register links. Okay, so in here, I'm just gonna put four slash If this is how you finish your if statement. Okay, I'm gonna go to my home page. Refresh. I got home profile. It means the user is logged in. Okay, so let me see. Find missing something. Now, my log in my logging does not need anything at the moment. My profile and my register as well. So yeah, I think I think that seat now. You got your home. You got your profile. Basically. Now we are all sets. If I delete the cookies, let me just delete the cookie. Okay? I try to refresh the home page. Look, I got home logging. That's it. And you got my register. Any fight due to the profile, I get redirected to the log in page. If I try to log in 123456 Log in. Look, I have my home page where I can see my profile log out. If I go to my profile, I can see the home and the log out. That's it, guys. All right, I know these video is quite long, but I hope that you could actually learn something useful from here and in the next video, which I think is gonna be the last one where we're gonna do our lookout instead of hers going in here all the time in just deleting the cookie. We're going to click in here on these button, and we're just gonna look out to the user. Alright, guys, that's it for this video, and I'll see you in the next one. 11. User Logout: All right, guys. Welcome back to the last video of the series and just left. It's just left for us now to do the log out. So if you guys remember when we were creating these log out, we were setting up everywhere that if we click on this button, we should go to these Your l of four slash off four slash log out. Okay, so we need to make sure that we create these routes in our no Js. So if I'm going in here to my app Thaci s whatever is the route that I do that it starts with 1/4 slash off. Okay, It goes in here into these routes, so we need to go into routes off. So if you're going to routes off, I want to create in here a route. So I'm gonna do router dots gets I'm gonna put get, because this is when you load the page, you always use the get method. So I'm just gonna put to get so he's going to go to look out. Okay? You don't need to put the off in the beginning because he's just coming from the app togs. Okay, so then when you go in here to these four, slash Off. What do you want to do? I would have run my off controller, which we imported up here, which is this file in here on the top left corner of the screen. OK, off controller. And then I want to run a function called Log Out. These function log out does not exist yet, but we're going to create it now. Okay, so off Controller, Log out. So if I'm going to my controllers off, okay, just make sure that this is nice. Just gonna copy this thing in here on the top, okay? And now, because this is not the middle where I don't need to put any next. Okay, So what I want to do is I'm gonna put in here rests dot cookie. Okay, so when you do rest dot Cookie OK, you just want to set up a new cookie. I'm going to set up a new cookie, OK? Called JWT. So, basically, if you already have a cookie called JWT, this one is just gonna overwrite the other one. Okay, so this cookie is gonna have the name of JWT, which is gonna override our current cookie, and then the value that I'm gonna put inside of it is just gonna be, for example Ah, log out. This is just the value. It could be anything that you guys want. And then finally, this is gonna be the expiration of your cookie. So the expiration of the cookie I'm gonna put in here X pyres, okay. And I'm going to set up a new date. Okay, so the new date that I want to set up is gonna be the date dot now, So it's gonna be the current date right now, and then I'm just gonna put thes like, um, maybe like to merely seconds or so to milliseconds like two seconds. It means that after you press the log out, your cookie will expire in two seconds. What does it mean That if the cookies would expire in two seconds, if the cookie expires, the cookie will be automatically removed from your browser after, like, two seconds. So I'm gonna put this times 1000 milliseconds. Okay, so this is like two seconds. Finally, we want to make sure that these only happens in a http method on the browser because you can have some sort of online attacks by SS A chores and so on. You just want to make sure that you can only do these via the browser via http. So you're gonna put in here true. Okay, so after you set up your new cookie, which is over writing your old one, you're just gonna do arrests Don't status. Okay? You wanna the state, this is gonna be 200. So it means is all goods, everything is fine. And then you're gonna do a redirect to the home page. So you press the log out when you press the log out, you come to these function. This function in here is just creating a new cookie called JWT, which is gonna override the one that you have in there. The value of these cookies log out. It doesn't matter. What is the value could be anything, because this is this cookie is just gonna be gone in a second is gonna expire two seconds after you press the log out and we're going to go in here, and we're gonna put these http only through and redirect the user to the home page. Um, I'm sure that I got in here Something that are missing because I got an error on routes orgs 202. Um, maybe I forgot something on my I think if there's some problem here, I'm just check what's wrong? Oh, I see. What's the problem? Because in here, when we did the exports dot It shouldn't be is logged in. It should be. Log out. Okay, this is what we needed. Okay, Log out. I'm not sure. How did I forget about these? Okay, let's give it a try. Home profile, all goods. So if I'm on profile and I'm gonna press the log out, look, what's gonna happen into our token? I'm not sure if you guys can see the token appear. Okay. She's the volume. This is the name I'm gonna breast. Look out. Okay. So when you press log out, you are automatically learn. Reacted to the home page. Obviously, you still see the token in here. But, you know, if you just refresh, the page is gonna be gone. Look, it's gone. You see, looking log outs. Okay, let's try to log in. So tell me at email dot com Well, again, you got you can go to the profile if you want. If you are on the home page, you can log out as well. If you want to win a breast, Look out! That's it. You are logged outs. Alright, guys, that's it. We got to the end of this course. I hope that you learn quite a lot. This was something that when I was starting to learn Web development, I was always so curious on how to create the logging system and how to create its, um, protected pages. And so I just decided to do this course, and I really hope that you enjoyed it. And if you enjoyed it, please, please leave me a review. Honest one. If you enjoyed it, put a nice one, of course. And that's it's, you know, let me know also in the comments, if you would like to see any other course for me, because I'm always like trying to create some new courses and that's it, guys, I really hope that you enjoy the scores and I'll see when the next one