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.