devenock
Creating your first Login page using Nodejs, Express, and MySQL.

Creating your first Login page using Nodejs, Express, and MySQL.

Enock Omondi's photo
Enock Omondi
·

6 min read

In this article, I am going to show you how to create your first login page as a beginner.

Requirements: Nodejs, Express, MySQL server installed e.g XAMPP, WAMP, etc, but I would recommend using XAMPP for a beginner.

Let's get started!!

There are many technologies that can be used for server-side development but here I am going to use Nodejs, Express, and MySQL for this small project.

Node.js is an open-source, cross-platform, back-end, JavaScript runtime environment that executes JavaScript code outside a web browser.

Express.js, or simply Express, is a back end web application framework for Node.js. It is designed for building web applications and APIs. It has been called the de facto standard server framework for Node.js.

MySQL is an open-source relational database management system.

Before we can get started on writing code, let's set up the project files.

First, let's create a folder node-login and open it in your favorite text editor. I will use Visual Studio Code.

Lets now initialize our application by running:

```npm init -y

This will generate a package.json file where all our modules and project details will be listed.

Let's then install all the modules that we will be using to create this Login page.  We need:  express and  MySQL

  run: 
```npm install --save express mysql

to install and save the modules in our package.json file.

    "name": "node-login",
    "version": "1.0.0",
    "description": "",
    "main": "server.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "express": "^4.17.1",
        "mysql": "^2.18.1"
    }
}

Let's then create our server.js file as shown in the .json file.

After creating the server.js file, we need to start working on creating the form before we can get back to connecting it with the database.

In the root directory, create an index.html file and public sub-folder.

In the created index.html file, add the following code snippets:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>

    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500&display=swap" rel="stylesheet">

    <!-- CUSTOM CSS -->
    <link rel="stylesheet" href="/css/style.css">
</head>

<body>
    <div class="container">
        <form action="/accounts" method="POST">
            <h1>Login</h1>
            <input type="text" id="name" placeholder="Username">
            <br>
            <input type="password" id="password" placeholder="Password">
            <br>
            <button type="submit">Login</button>
        </form>
    </div>
</body>

</html>

Let's add a style.css file in the public sub-folder and add the following CSS styles.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
}

.container {
    display: flex;
    width: 100%;
    overflow-x: hidden;
}

form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 30%;
    margin: auto;
    border: 1px solid #222;
    margin-top: 100px;
    height: auto;
}

form h1 {
    margin-top: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
}

input {
    width: 90%;
    margin-top: 30px;
    height: auto;
    padding: 20px;
    outline: none;
    font-size: 1rem;
    background: #06060c;
    color: #fff;
    border: none;
}

form button {
    width: 30%;
    height: auto;
    padding: 20px;
    border: none;
    cursor: pointer;
    color: #fff;
    background: #06060c;
    outline: none;
    margin-bottom: 10px;
}

This will add appropriate styles to our form we just created in the index.html file. Once we are done with the form, let's get back to setting up our server so that the app can listen to it.

In the server.js file, we are going to require the modules we installed earlier.

Enter the following code snippet before I can explain what it does.

//IMPORT THE MODULES
const express = require('express');
const path = require('path');
const mysql = require('mysql');

//INITIALIZE EXPRESS
const app = express();



// DECLARE DB CONNECTION
const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: "",
    database: 'new_login'
});

// CONNECT TO THE DATABASE

connection.connect((err) => {
    if (err) throw err;
    console.log('Connected successfully.');
});

// DEFINE ROUTES
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname + '/index.html'));
});

app.post('/accounts', (req, res) => {
    res.send('You have logged in successfully');
});

// ADD STATIC CSS STYLES
app.use(express.static(__dirname + '/public'));


//LISTEN TO THE PORT 
app.listen(3000, function() {
    console.log('Server running successfully!!');
});

First, we import the modules using the require() function. Then we initialize our application using the express() function.

After that, we need to declare our connection to the database with the required credentials.

Let's then connect to our database and highlight the condition to be met for the connection to be established.

After that, we need to define our routes and allow the app to be rendered to the browser using the GET route.

We can then define the POST route which is executed when the form submit button is clicked and the page redirects to the specified URL.

Navigate to your phpMyAdmin and create a database with the name

new_login and now the app is ready.

Navigate to the inbuilt terminal in your VSCode or open the root folder in the terminal and run:

node server.js

to start the server. And boom you made it!!

Node.jsExpress.jsMySQL