Node.js Express Registration Form MySQL Example

Node js express registration form example mysql; In this tutorial, i am going to teach you how to create registration form in node js express with MySQL database.

A registration form is a list of fields that a user will input data into and submit to a company or individual. Companies use registration forms to sign up customers for subscriptions, services, or other programs or plans.

In this create registration form in node.js express and mysql example; i will install some dependencies for creating registration form in node.js express and mysql. Then i’ll create registration html markup form. And create a method which will register user from form into mysql database uisng node js express app.

Registration Form using Node js Express and MySQL

• Step 1 – Create New Node Express JS
• Step 2 – Create DB , Table and Connect App with DB
• Step 3 – Install Flash,Session,Validator, MySQL Package
• Step 4 – Import Installed Dependencies routes in app.js
• Step 5 – Create Registration Route
• Step 6 – Create Registration Form
• Step 7 – Start Node js Express Registration Form with MySQL App Server

Step 1 – Create New Node Express JS

Execute the following command on terminal to create loginAuthSystem directory:

express --view=ejs loginAuthSystem

cd loginAuthSystem

Step 2 – Create DB , Table and Connect App with DB

Execute the following sql query to your phpmyadmin and create a database and table:

CREATE DATABASE IF NOT EXISTS `nodelogin` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;
USE `nodelogin`;
CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) NOT NULL,
  `name` varchar(50) NOT NULL,
  `password` varchar(255) NOT NULL,
  `email` varchar(100) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
INSERT INTO `users` (`id`, `name`, `password`, `email`) VALUES (1, 'test', 'test', '[email protected]');
ALTER TABLE `users` ADD PRIMARY KEY (`id`);
ALTER TABLE `users` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=2;

Then create a new file which name database.js; so go your app root directory and create it.

After that, add the MySQL connection code into your database.js file to connect your app to database:

 var mysql=require('mysql');
 var connection=mysql.createConnection({
   host:'localhost',
   user:'root',
   password:'your password',
   database:'nodelogin'
 });
connection.connect(function(error){
   if(!!error){
     console.log(error);
   }else{
     console.log('Connected!:)');
   }
 });  
module.exports = connection; 

Step 3 – Install Flash,Session,Validator, MySQL Package

Install flash message, session, validator, override, and mysql package by executing the following command on terminal:

 npm install    
 npm install express-flash --save
 npm install express-session --save
 npm install express-validator --save
 npm install method-override --save
 npm install mysql --save

Step 4 – Import Installed Dependencies routes in app.js

Visit your app root directory and open app.js file; then import above installed dependencies into your app.js file; as shown below:

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var expressValidator = require('express-validator');
var flash = require('express-flash');
var session = require('express-session');
var bodyParser = require('body-parser');
var mysql = require('mysql');
var connection  = require('./lib/db');
var indexRouter = require('./routes/index');
var authRouter = require('./routes/auth');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(session({ 
    secret: '123456cat',
    resave: false,
    saveUninitialized: true,
    cookie: { maxAge: 60000 }
}))
app.use(flash());
app.use(expressValidator());
app.use('/', indexRouter);
app.use('/auth/registration', authRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};
  // render the error page
  res.status(err.status || 500);
  res.render('error');
});
module.exports = app;

Step 5 – Create Login Route

Visit your app root directory and open routes directory. Then inside route directory create one route file name auth.js:

var express = require('express');
var router = express.Router();
var connection  = require('../lib/db');

//display login page
router.get('/register', function(req, res, next){    
    // render to views/user/add.ejs
    res.render('auth/registeration', {
        title: 'Registration Page',
        name: '',
        email: '',
        password: ''     
    })
})
// user registration
router.post('/post-register', function(req, res, next){    
    req.assert('name', 'Name is required').notEmpty()           //Validate name
    req.assert('password', 'Password is required').notEmpty()   //Validate password
    req.assert('email', 'A valid email is required').isEmail()  //Validate email
 
    var errors = req.validationErrors()
    
    if( !errors ) {   //No errors were found.  Passed Validation!
        
    
        var user = {
            name: req.sanitize('name').escape().trim(),
            email: req.sanitize('email').escape().trim(),
            password: req.sanitize('password').escape().trim()
        }
        
            connection.query('INSERT INTO users SET ?', user, function(err, result) {
                //if(err) throw err
                if (err) {
                    req.flash('error', err)
                    
                    // render to views/user/add.ejs
                    res.render('auth/register', {
                        title: 'Registration Page',
                        name: '',
                        password: '',
                        email: ''                    
                    })
                } else {                
                    req.flash('success', 'You have successfully signup!');
                    res.redirect('/login');
                }
            })
    }
    else {   //Display errors to user
        var error_msg = ''
        errors.forEach(function(error) {
            error_msg += error.msg + '<br>'
        })                
        req.flash('error', error_msg)        
        
        /**
         * Using req.body.name 
         * because req.param('name') is deprecated
         */ 
        res.render('auth/register', { 
            title: 'Registration Page',
            name: req.body.name,
            email: req.body.email,
            password: ''
        })
    }
});
module.exports = router;

The above file will routes will display registration forma and store registration form data into MySQL database in node js express app.

Step 6 – Create Registration Form

Visit views directory in your app and create the Auth directory. And create one views file name reigstration.ejs.

• registration.ejs

Add the following code in registration.ejs file:

<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
  <% if (messages.error) { %>
  <p style="color:red"><%- messages.error %></p>
  <% } %>
   
  <% if (messages.success) { %>
      <p style="color:green"><%- messages.success %></p>
  <% } %>
  <form action="/auth/post-register" method="post" name="form1">
    <div class="form-group">
      <label for="exampleInputEmail1">Name</label>
      <input type="name" name="name" class="form-control" id="name" aria-describedby="nameHelp" placeholder="Enter name" value="">
    </div>   
    <div class="form-group">
      <label for="exampleInputEmail1">Email</label>
      <input type="email" name="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email" value="">
    </div>
    <div class="form-group">
      <label for="exampleInputEmail1">Password</label>
      <input type="password" name="password" class="form-control" id="password" aria-describedby="emailHelp" placeholder="*********" value="">
    </div>
    <input type="submit" class="btn btn-primary" value="Add">
    <a href="auth/login" class="btn btn-success ml-2">Login</a>
  </form> 
</body>
</html>

Add the following code in home.ejs file:

<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    
  <% if (messages.error) { %>
  <p style="color:red"><%- messages.error %></p>
  <% } %>
   
  <% if (messages.success) { %>
      <p style="color:green"><%- messages.success %></p>
  <% } %>
  <div class="card">
    <div class="card-header">
     Dashboard <b><%= name %></b>
    </div>
    <div class="card-body">
      <h5 class="card-title">Welcome</h5>
      <p class="card-text">You have successfully login</p>
      <a href="auth/logout" class="btn btn-primary">Logout</a>
    </div>
  </div>
  </div>
</body>
</html>

Step 7 – Start Node js Express Registration Form with MySQL App Server

Execute the following command on terminal to node js express login with mysql app server:

//run the below command

npm start

after run this command open your browser and hit 

http://127.0.0.1:3000/auth
OR
http://127.0.0.1:3000/auth/login

Conclusion

In this node express js login example with MySQL tutorial. You have learned how to create login system in node js using express js framework with MySQL db.

Recommended Node js Tutorials