Cara menggunakan does mysql supports uuid?
In this tutorial, we'll be developing a login system with Node.js, Express, and MySQL. Node.js will enable us to develop our application with JavaScript, Express is a web framework, and we'll be using MySQL to store and retrieve account details (username, password, etc.). Show
The login system we'll be developing is similar to that of the PHP login system tutorial, but will not be as comprehensive. The includes additional features and a download link to the source code. For more detailed information and screenshots, click here. Contents1. Why create a login system with Node.js as opposed to PHP?Node.js is a powerful open-source server environment that leverages JavaScript as its core scripting language. As more people become aware of Node.js, it is becoming increasingly popular in the development of web applications. Therefore, if you plan to develop applications for the future web, I highly suggest you enhance your knowledge with Node.js. Node.js's package manager (NPM) already has over 450,000 packages available for you to download. Those numbers alone indicate how fast it's growing. Did you know?Unlike PHP, Node.js does not depend on Apache or Nginx because Node.js is its own environment. If you are familiar with JavaScript, you will enjoy developing applications with Node.js, and will be able to adapt very easily. 2. Getting StartedBefore we start developing our Node.js login system, we need to install software and packages that our app will depend on, and subsequently create the structure for our app. 2.1. What You Will Learn in this Tutorial
2.2. Requirements
2.3. Setup & File StructureFollow the below instructions.
A new directory will appear called node_modules, which is populated with all the modules we've installed. Don't delete this directory, otherwise it will break our app. File Structure\-- nodelogin 3. Styling the Login Form with CSSCascading style sheets will enable us to structure the login form and make it look more appealing. The stylesheet file consists of properties that are associated with HTML elements. Edit the style.css file and add: CSS
That's all we need to add to our CSS file. 4. Creating the Login Template with HTMLThe login form will consist of an HTML form element and input elements, enabling the user to enter their details and submit them. There is no need to include Node.js code in the template file. Edit the login.html file and add: HTML
Let's narrow down what each element will do.
The login template will enable users to submit their details, and we'll use Node.js to validate the details. We'll be using a POST request to capture the details, which we can then handle in our Node.js auth route. 5. Creating the Login App with Node.jsNow that we have all our basics finished, we can finally start developing our app with Node.js. To use a module in a Node.js app, we need to include it. Therefore, we need to add the following variables to our login.js file: JS
The above code will include the MySQL, Express, Express-session, and Path modules, and associate them with the variables we have declared. Before we implement the database connection code, we need a database to connect to. Therefore, we must execute the below SQL statement either with command line or your preferred MySQL Editor. Make sure the MySQL server is running on port 3306. SQL
The above SQL statement will create the database (nodelogin) and create the accounts table. In addition, it will insert a test account that we can use for testing purposes. We can now connect to our database with the following code: JS
The connection details must reflect your database credentials. In most local environments, the default username is root, so you might not have to change anything, but in production mode, we highly suggest you change the default username for MySQL and set a strong password. Express is what we'll use for our web application, which includes packages that are essential for server-side web development, such as sessions and handling HTTP requests. Add the following code to initialize express: JS
After, we need to associate the modules we'll be using with Express: JS
Make sure to update the secret code variable when declaring the session function as it will used to secure the session data. We'll be using sessions to determine whether the user is logged-in or not. The json and urlencoded methods will extract the form data from our login.html file. Security TipWhen deploying your project to a production server, ensure you're leveraging SSL as it will help secure the browser cookies that are associated with sessions. After, we need to declare the login route that will output our login.html file to the client using a GET request. Add the following: JS
When the client establishes a new connection to our Node.js server, it will output the login.html file. Next, we need to add a new route that will authenticate the user. Add the following: JS
The above code will create our authentication route using the POST method, which will capture our input fields when the user submits the form. Remember the action we declared for our form in the login template? We are using the same value for the path in our new route, so when the user submits the form, the /auth will be appended to the URL. When the user submits the form, the code will check if both input fields are not empty and will subsequently select the account from our accounts table in our MySQL database. The user is successfully authenticated and redirected to the home page if the account exists. If not, they will encounter an error message. The loggedin session variable will be used to determine whether the user is logged in or not, and the username variable we can use to output on the home page. We can finally create the home route that will output the user's username. Add the following: JS
Finally, our Node.js server needs to listen on a port, so for testing purposes, we can use port 3000. Add the following: JS 0Ideally, when you deploy your login system to a production server, you would want your server to listen on port 80, so you don't have to specify the port number in the URL. To start our Node.js app, we can execute the command node login.js in command line. If we navigate to http://localhost:3000/ in our browser, we should see the login form, which should look like the following: http://localhost:3000/ You can proceed to log in with the test account (username: test, password: test). If successful, you will see the username displayed on the screen. Full login.js SourceJS 1ConclusionYou should now have a basic understanding of how a login system works and the fundamentals involved. While we don't recommend deploying the system to a production environment, you can, however, use it as a base in your development projects. What next? Consider implementing security techniques (password hashing, prepared statements, CSRF, etc.) and the registration aspect. If you've enjoyed this tutorial, don't forget to like, follow, and share it on social media. We appreciate your support. Enjoy coding! If you would like to support us, consider purchasing a package below as it will greatly help us create more quality tutorials and keep our server up and running. BasicAdvancedSource code Database SQL file Login & Registration system Home page Profile page Activate account feature Edit profile page Remember me feature Forgot & Reset Password AJAX integration Password encryption reCAPTCHA protection CSRF protection Brute-force protection Two-factor Authentication Admin Panel Responsive Design (mobile-friendly) SCSS file Commented code Free updates & support (bugs and minor issues) User Guide * Payments are processed with PayPal. $20.00PayPal DownloadStripe Cryptocurrency DownloadFor more detailed information regarding the advanced package, click here. About AuthorDavid AdamsEnthusiastic website developer, I've been designing and developing web applications for over 10 years, I enjoy the creativity I put into my projects and enjoy what others bring to the awesome web. My goal is to help newcomers learn the ways of the web. |