What's going on guys? Today we are going to build a login system using Node and MySQL. So let's just get in here a quick overview about this project that we're going to 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 we got one for the home page, which is this one. We got another one for a login, 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 Max Smith, okay Max Smith. I'm gonna put the email is gonna be max at email.com. I'm gonna put the password for example one two three four five six one two three four five six and I'm gonna press register and now this person Max 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 logout if you want to log out the user of course so I'm going to show you this is the database we're going to use um no mysql of course so I'm just going to refresh the page look I got maxsmith I got maxemail.com and I got the password that I just typed in completely encrypted, completely hashed so everything is secure.
So let me just show you. I got in here on 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 is only accessible for people who are logged in. Okay, so if I do log out, okay, I'm logged out now.
If I do... if I go on the top on the URL to forward slash profile, okay, it takes me back to the login form, okay, it does not let me go to the profile page unless I am logged in, so I'm just going to log in again, I'm going to put max at email.com, the password that I put was 123456, I'm going to press login, and now I'm back logged in, what am I using for logging in and logging out? I am just using some, let me go in here, I am using some cookies.
Okay, so we are going to learn how to deal with cookies in here. Alright, so I hope everyone is excited to get started with this project. So for using the MySQL database locally, I'm going to be using a software in here called ZAMP.
Okay, so ZAMP. So this is what I'm going to be using guys. Okay, I'm on Windows. If you guys are.
on macOS, if you are using a MacBook, I would advise you to use this MAMP, okay? Because I don't know why when I'm using my MacBook, I always have some trouble using XAMPP, so I use MAMP instead, this one. That is a free version, so you guys should be fine to use if you are on macOS. If you are on Windows, just use this one, XAMPP. Okay, so once you download the XAMPP, okay, and you install it.
If you go into, let me just go in here, if you go into your C, program files and then XAMPP, okay, just like I have in here on the window, C, program files and then XAMPP. Once you go inside, if you scroll down, if you open this one that says XAMPP control dot exz, okay, this is executable, you should be able to see this small window, okay? I would like you to just press start on the Apache and on the MySQL so you can just run your server locally for the MySQL.
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 it's gonna be very similar on mump. So let's get started with our project so I'm gonna go in here I'm gonna do 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 going to call this one notes, my SQL. Okay, now I'm going to open that folder that I just created so if I'm gonna go in here node-sql I'm gonna open this folder okay now I open this folder with my Visual Studio code this is the code editor that I'm gonna be using so the first thing I want to do is I want to create a package.json file so let's just open the terminal When you open the terminal in here on Visual Studio Code, it should open the terminal directly on your directory where is your folder that you just opened.
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 courses, and then I'm inside of node mysql. And if I'm going to do ls, you know, there is nothing inside.
This command ls 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 do a npm init dash y. 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 Node.js installed on your computer. Let me just go back in here to the browser.
If you don't have Node.js installed, look, just go on Google, Node.js. So it should be this link in here, nodejs.org. Just download Node.js. 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 this.
To make sure that you have Node.js installed, you can just do node-v. If you have something like this. V10 or it doesn't matter if you don't have the same exact.
I think my node is a bit outdated now What was the newest one 12 or 14? So mine is completely fine for now So I don't need to care about this. You see make sure that when you do node-v you have something installed Okay, now I can do npm init dash y Okay, and this now is gonna create a file for me a package.json 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 going to create a new file in here. So to create a new file, you can right click new file, or you can go on the top into this new icon and click. And I'm going to call this file app.js. So inside of this file, this is where I'm going to put all the main things for our project. First of all, I'm going to install a couple of the dependencies that we need.
Look, if you open your package.json, 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 going to need a couple of things. I'm going to need Express. Okay, I'm going to need Express to start our server.
I'm gonna need MySQL, okay, because we need to connect Node.js with MySQL. And what else I need? I need something called a.env, okay?
This is where I'm gonna create all my sensitive information like passwords and so on, so we keep everything protected. I'm going to install HBS. This is going to be handled bars, so HBS is going to be our template for the HTML.
Let me just install this for now. I think I'm missing something else. Oh, I think I'm missing Yeah, I'm missing Two things I'm gonna do in here nodemon. No, sorry.
I'm gonna do npm i dash-dash save nodemon, okay, nodemon is just to make sure that whenever we do some changes to our file app.js We can just, the server is going to just restart automatically, okay? So if you install nodes, nodemon, okay? If you are on Mac, maybe you will have some errors trying to do this. You can just write like this, sudo before, sudo npm i dash dash save nodemon. If you are on Windows, you don't need to put this sudo, okay?
Only if you are on Mac, on a MacBook, okay? Right, I'm just going to 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.js.
So let me go to my app.js. There's going to be a couple of things that we need to do in here. I'm going to start in here with a const express equals to require. Express, okay? So we need to import Express that we just installed to make sure that we can start our server from Node.js then After this, I'm gonna do a const app equals to express.
Okay, this is just to make sure that you start a server Okay with this app now, I'm gonna do Something else in here. I'm gonna do for example Up no, I actually need to 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 get okay. I'm gonna start in here with a request response Okay, so what I created in here is whenever I go to my to my page on the browser on the forward slash It means it's 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 going to deal at the moment later on, I'm going to show you and these res 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 a rest dot send, okay, I want to send something into the front end. and I'm just gonna send in here for example home page okay so we created this route okay this can be called the route because I can go to this forward slash on my browser and show something to the user okay now that I have this I want to do something else which is gonna be app.listen So you need to tell Express which port do you want to listen in order to start your first project. So I want to listen on port 5000. You guys can choose any port.
5000 in 2, 5000 in 3, 5000 in 1, 6000, 7000, 8000 is up to you. I think there's going to be a limit. I'm not sure which one is it, but anywhere between 3000 and 9000, it should be all good. So after this, okay, this port. I'm just going to put in here a function and this function in here I'm just going to write console.log of server started on port 5000. This is just to make sure that this will run.
Okay. All right. So now that we got this is just like the bare minimum to start your node.js project. I'm going to go inside of my package.json.
In here where you guys see these scripts, I want to add a new script. Okay? I'm going to add a new script in here. It's going to be called start.
And so whenever I do npm start on my terminal, what do I want to run? I want to run this. nodemon app.js.
Okay? Make sure that you guys put this comma in here in the end of this test. 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, Node.js actually is going to run this command, nodemon app.js.
This is the dependency that we just installed before, nodemon, because I'm going to show you something, guys. Whenever you do some changes to your file, app.js, for example, if you are not using nodemon, you need to stop your server and restart it again in order to see the changes. But if you use nodemon, if you do some changes in here and you save it, you don't need to stop the server and restart it again. Okay? So this is one of the great advantages of using this nodemon.
So I'm going to do npm start. If I do npm start, actually node.js in the back end is just doing nodemon app.js running this file. Okay?
Npm start. And if everything is fine, looks like we have an error. So it's saying already in use. I think it's because it was my other project.
So I'm just going to put in here, for example, 5001. Okay, I think it's because my other project, look, now is all good. My server started on port 5001. All right, so if I'm going to go in here onto the top, I'm going to put local host. Okay, make sure that you guys do this as well. Okay, localhost colon 5001. 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 and that's it basically we just start our server everything is working we got our express we got the message when we 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 all right guys so that's going to be it for this video in the next video i'm actually going to show you how you can connect you with the database.
Alright guys, I'll see you in the next video.