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
Flash is an extension of connect-flash with the ability to define a flash message and render it without redirecting the request.
In this node js mysql crud tutorial express flash is used to display a warning, error and information message
Express-session is used to made a session as like in PHP. In this node js mysql crud tutorial, session is needed as the express requirement of express-flash.
Express validator is used to validate form data it is easy to use. express-validator highly effective and efficient way to accelerate the creation of applications.
NPM is used to run a DELETE and PUT method from an HTML form. In several web browsers only support GET and POST methods.
Driver to connect node.js with MySQL
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.
Be First to Comment