Создание формы входа и регистрации с помощью Node.js, Express.js и базы данных MySQL

Сегодня мы узнаем, как создать форму входа и регистрации с помощью node.js, express.js и mysql.

Содержание

Наша цель
Скачаем необходимые программы
Создаем базу данных для хранения данных в MySQL
Создание веб-сервера в Node.js и Express.js
Мы вводим данные в базу данных MySQL
Мы создадим форму входа в систему

Наша цель

Внесение данных, введенных пользователем в форме регистрации, в базу данных MySQL, после проверки, была ли такая информация внесена в базу данных. В форме входа в систему, проверка наличия введенных пользователем данных в базе данных MySQL и работа с сессиями.

Скачаем необходимые программы

Файловая структура:

node_modules
failLog.html
failReg.html
login.html
package-lock.json
package.json
register.html
server.js

Вход в полноэкранный режим Выход из полноэкранного режима

Создаем папку нашего приложения:

mkdir myform && cd myform

Войти в полноэкранный режим Выход из полноэкранного режима

Создание проекта Node и инициализация:

npm init -y

Войти в полноэкранный режим Выход из полноэкранного режима

Для этого нам понадобится Node.js, AppServ и база данных MySQL. Мы загружаем некоторые библиотеки из NPM:

npm i express mysql cookie-parser express-session body-parser

Войти в полноэкранный режим Выйти из полноэкранного режима

Создаем базу данных для хранения данных в MySQL

В SQL-редакторе phpMyAdmin используем следующий SQL-код:

CREATE DATABASE myform

Войти в полноэкранный режим Выйти из полноэкранного режима

После создания базы данных с именем myform, мы создаем в ней таблицу users:

CREATE TABLE users (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
firstname VARCHAR(30) NOT NULL,
lastname VARCHAR(30) NOT NULL,
username VARCHAR(50) NOT NULL,
password VARCHAR(50) NOT NULL,
reg_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
)

Войти в полноэкранный режим Выход из полноэкранного режима

Создание веб-сервера в Node.js и Express.js

Чтобы создать веб-сервер, создадим файл server.js.

// server.js
const express = require("express");

const app = express();

app.get('/', (req, res)=>{
   res.send("Hello, world!");
});

app.listen(4000, ()=>{
   console.log("Server running on port 4000");
});

Вход в полноэкранный режим Выход из полноэкранного режима

Теперь мы создадим форму регистрации на главной странице этого сервера. Для этого создадим файл с именем register.html и вставим в него следующие коды:

<!--register.html-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Login and register form with Node.js, Express.js and MySQL</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <h2>Login and register form with Node.js, Express.js and MySQL</h2>
      <h3>Register form</h3>
      <form action="/register" method="POST">
        <div class="form-group mb-3">
            <label>First name</label>
            <input type="text" class="form-control" placeholder="First name" name="firstName">
        </div>
        <div class="form-group mb-3">
            <label>Last name</label>
            <input type="text" class="form-control" placeholder="Last name" name="lastName">
        </div>
        <div class="form-group mb-3">
            <label>Username</label>
            <input type="text" class="form-control" placeholder="Username" name="userName">
        </div>
        <div class="form-group mb-3">
            <label>Password</label>
            <input type="password" class="form-control" placeholder="Password" name="password">
          </div>
        <div class="d-grid mt-3">
        <button type="submit" class="btn btn-primary form-control">Submit</button>
        </div>
      </form>
    </div>
  </body>
</html>

Войти в полноэкранный режим Выйти из полноэкранного режима

Мы загружаем файл register.html на домашнюю страницу нашего веб-сервера и используем body-parser для извлечения из него данных пользователя:

const express = require('express');

var parseUrl = require('body-parser');
const app = express();


let encodeUrl = parseUrl.urlencoded({ extended: false });

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/register.html');
})

app.post('/register', encodeUrl, (req, res) => {
    var firstName = req.body.firstName;
    var lastName = req.body.lastName;
    var userName = req.body.userName;
    var password = req.body.password;
});

app.listen(4000, ()=>{
    console.log("Server running on port 4000");
});

Войти в полноэкранный режим Выход из полноэкранного режима

Мы вводим данные в базу данных MySQL

Мы проверяем базу данных на предмет того, регистрировался ли этот пользователь ранее:

const express = require('express');
const cookieParser = require("cookie-parser");
const sessions = require('express-session');
const http = require('http');
var parseUrl = require('body-parser');
const app = express();

var mysql = require('mysql');

let encodeUrl = parseUrl.urlencoded({ extended: false });

//session middleware
app.use(sessions({
    secret: "thisismysecrctekey",
    saveUninitialized:true,
    cookie: { maxAge: 1000 * 60 * 60 * 24 }, // 24 hours
    resave: false
}));

app.use(cookieParser());

var con = mysql.createConnection({
    host: "localhost",
    user: "root", // my username
    password: "123456789", // my password
    database: "myform"
});

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/register.html');
})

app.post('/register', encodeUrl, (req, res) => {
    var firstName = req.body.firstName;
    var lastName = req.body.lastName;
    var userName = req.body.userName;
    var password = req.body.password;

    con.connect(function(err) {
        if (err){
            console.log(err);
        };
        // checking user already registered or no
        con.query(`SELECT * FROM users WHERE username = '${userName}' AND password  = '${password}'`, function(err, result){
            if(err){
                console.log(err);
            };
            if(Object.keys(result).length > 0){
                res.sendFile(__dirname + '/failReg.html');
            }else{
            //creating user page in userPage function
            function userPage(){
                // We create a session for the dashboard (user page) page and save the user data to this session:
                req.session.user = {
                    firstname: firstName,
                    lastname: lastName,
                    username: userName,
                    password: password 
                };

                res.send(`
                <!DOCTYPE html>
                <html lang="en">
                <head>
                    <title>Login and register form with Node.js, Express.js and MySQL</title>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
                </head>
                <body>
                    <div class="container">
                        <h3>Hi, ${req.session.user.firstname} ${req.session.user.lastname}</h3>
                        <a href="/">Log out</a>
                    </div>
                </body>
                </html>
                `);
            }
                // inserting new user data
                var sql = `INSERT INTO users (firstname, lastname, username, password) VALUES ('${firstName}', '${lastName}', '${userName}', '${password}')`;
                con.query(sql, function (err, result) {
                    if (err){
                        console.log(err);
                    }else{
                        // using userPage function for creating user page
                        userPage();
                    };
                });

        }

        });
    });


});

app.listen(4000, ()=>{
    console.log("Server running on port 4000");
});

Войти в полноэкранный режим Выйти из полноэкранного режима

<!--failReg.html-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Login and register form with Node.js, Express.js and MySQL</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
        <center>
            <h3 class="text-danger">This user already registered!</h3>
            <a href="/">Try again</a>
        </center>
    </div>
  </body>
</html>

Войти в полноэкранный режим Выйти из полноэкранного режима

Все вышеперечисленное было написано для формы регистрации!

Мы создадим форму входа в систему

Чтобы создать форму входа, сначала создайте файл с именем login.html и добавьте в него следующие коды:

<!--login.html-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Login and register form with Node.js, Express.js and MySQL</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <h2>Login and register form with Node.js, Express.js and MySQL</h2>
      <h3>Login form</h3>
      <form action="/dashboard" method="POST">
        <div class="form-group mb-3">
            <label>Username</label>
            <input type="text" class="form-control" placeholder="Username" name="userName">
        </div>
        <div class="form-group mb-3">
            <label>Password</label>
            <input type="password" class="form-control" placeholder="Password" name="password">
          </div>
        <div class="d-grid mt-3">
        <button type="submit" class="btn btn-primary form-control">Submit</button>
        </div>
      </form>
    </div>
  </body>
</html>

Вход в полноэкранный режим Выйти из полноэкранного режима

Теперь мы вводим коды формы входа в наш файл server.js:

//server.js

// upload `login.html` file to /login page
app.get("/login", (req, res)=>{
    res.sendFile(__dirname + "/login.html");
});

// get user data to /dashboard page
app.post("/dashboard", encodeUrl, (req, res)=>{
    var userName = req.body.userName;
    var password = req.body.password;

    con.connect(function(err) {
        if(err){
            console.log(err);
        };
//get user data from MySQL database
        con.query(`SELECT * FROM users WHERE username = '${userName}' AND password = '${password}'`, function (err, result) {
          if(err){
            console.log(err);
          };
// creating userPage function to create user page
          function userPage(){
            // We create a session for the dashboard (user page) page and save the user data to this session:
            req.session.user = {
                firstname: result[0].firstname, // get MySQL row data
                lastname: result[0].lastname, // get MySQL row dataa
                username: userName,
                password: password 
            };

            res.send(`
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <title>Login and register form with Node.js, Express.js and MySQL</title>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
            </head>
            <body>
                <div class="container">
                    <h3>Hi, ${req.session.user.firstname} ${req.session.user.lastname}</h3>
                    <a href="/">Log out</a>
                </div>
            </body>
            </html>
            `);
        }

        if(Object.keys(result).length > 0){
            userPage();
        }else{
            res.sendFile(__dirname + '/failLog.html');
        }

        });
    });
});

Войти в полноэкранный режим Выход из полноэкранного режима

<!--failLog.html-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Login and register form with Node.js, Express.js and MySQL</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
        <center>
            <h3 class="text-danger">This username or password error!</h3>
            <a href="/">Try again</a>
        </center>
    </div>
  </body>
</html>

Войти в полноэкранный режим Выход из полноэкранного режима

Весь код в файле server.js:

const express = require('express');
const cookieParser = require("cookie-parser");
const sessions = require('express-session');
const http = require('http');
var parseUrl = require('body-parser');
const app = express();

var mysql = require('mysql');
const { encode } = require('punycode');

let encodeUrl = parseUrl.urlencoded({ extended: false });

//session middleware
app.use(sessions({
    secret: "thisismysecrctekey",
    saveUninitialized:true,
    cookie: { maxAge: 1000 * 60 * 60 * 24 }, // 24 hours
    resave: false
}));

app.use(cookieParser());

var con = mysql.createConnection({
    host: "localhost",
    user: "root", // my username
    password: "123456789", // my password
    database: "myform"
});

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/register.html');
})

app.post('/register', encodeUrl, (req, res) => {
    var firstName = req.body.firstName;
    var lastName = req.body.lastName;
    var userName = req.body.userName;
    var password = req.body.password;

    con.connect(function(err) {
        if (err){
            console.log(err);
        };
        // checking user already registered or no
        con.query(`SELECT * FROM users WHERE username = '${userName}' AND password  = '${password}'`, function(err, result){
            if(err){
                console.log(err);
            };
            if(Object.keys(result).length > 0){
                res.sendFile(__dirname + '/failReg.html');
            }else{
            //creating user page in userPage function
            function userPage(){
                // We create a session for the dashboard (user page) page and save the user data to this session:
                req.session.user = {
                    firstname: firstName,
                    lastname: lastName,
                    username: userName,
                    password: password 
                };

                res.send(`
                <!DOCTYPE html>
                <html lang="en">
                <head>
                    <title>Login and register form with Node.js, Express.js and MySQL</title>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
                </head>
                <body>
                    <div class="container">
                        <h3>Hi, ${req.session.user.firstname} ${req.session.user.lastname}</h3>
                        <a href="/">Log out</a>
                    </div>
                </body>
                </html>
                `);
            }
                // inserting new user data
                var sql = `INSERT INTO users (firstname, lastname, username, password) VALUES ('${firstName}', '${lastName}', '${userName}', '${password}')`;
                con.query(sql, function (err, result) {
                    if (err){
                        console.log(err);
                    }else{
                        // using userPage function for creating user page
                        userPage();
                    };
                });

        }

        });
    });


});

app.get("/login", (req, res)=>{
    res.sendFile(__dirname + "/login.html");
});

app.post("/dashboard", encodeUrl, (req, res)=>{
    var userName = req.body.userName;
    var password = req.body.password;

    con.connect(function(err) {
        if(err){
            console.log(err);
        };
        con.query(`SELECT * FROM users WHERE username = '${userName}' AND password = '${password}'`, function (err, result) {
          if(err){
            console.log(err);
          };

          function userPage(){
            // We create a session for the dashboard (user page) page and save the user data to this session:
            req.session.user = {
                firstname: result[0].firstname,
                lastname: result[0].lastname,
                username: userName,
                password: password 
            };

            res.send(`
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <title>Login and register form with Node.js, Express.js and MySQL</title>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
            </head>
            <body>
                <div class="container">
                    <h3>Hi, ${req.session.user.firstname} ${req.session.user.lastname}</h3>
                    <a href="/">Log out</a>
                </div>
            </body>
            </html>
            `);
        }

        if(Object.keys(result).length > 0){
            userPage();
        }else{
            res.sendFile(__dirname + '/failLog.html');
        }

        });
    });
});

app.listen(4000, ()=>{
    console.log("Server running on port 4000");
});

Войти в полноэкранный режим Выход из полноэкранного режима

Спасибо за внимание!!!