Login form using REST api using nodejs and express
REST API
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const mysql = require('mysql');
var cors = require('cors');
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}));
// connection configurations
const mc = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '',
database: 'public_reviews'
});
// connect to database
mc.connect();
// default route
app.post('/checklogin', function (req, res) {
let l_name = req.body.uname;
let l_pwd = req.body.upassword;
console.log(l_name);
console.log(l_pwd);
mc.query('SELECT id,uname FROM login where uname=? AND upassword=?',[l_name ,l_pwd] ,function (error, results, fields) {
//console.log(results[0].id)
console.log(results[0])
if (error) throw error;
if(results[0]!=null){
return res.send({ error: false, data: results[0], message: results[0].id });
}
else{
return res.send({ error: true, message: 'Not Get Data.', status : 201 });
}
});
});
app.listen(8080, function () {
console.log('Node app is running on port 8080');
});Package.JSON
{
"name": "restapi",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.18.3",
"cors": "^2.8.5",
"express": "^4.16.4",
"mysql": "^2.16.0"
}
}
Client Program
<!DOCTYPE html>
<html lang="en">
<head>
<title>login</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<!--<script src="jquery/jquery-3.3.1.js"></script>-->
<style>
body {
background-color: #106b6ed3;
}
</style>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
var uname= $("#uname").val();
var pwd= $("#upassword").val();
var jsondata = JSON.stringify({'uname':uname,'upassword':pwd});
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "http://localhost:8080/checklogin",
data: jsondata,
success: function (data) {
//var obj = data.d;
//alert(data);
if(data.message == 1)
{
alert('Congrats Data is OK');
}
else{
alert('Invalid Username or password')
}
},
error: function (result) {
alert("Error");
}
});
})
})
</script>
</head>
<body >
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6" >
<h2>Welcome to Admin Panel</h2>
<div class="panel panel-default">
<div class="panel-heading">Admin Login</div>
<div class="panel-body">
<form>
<div class="row">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="uname" type="text" class="form-control" placeholder="Email">
</div>
</div><br>
<div class="row">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input type="password" class="form-control" id="upassword" placeholder="Password">
</div>
</div><br>
<input type="button" value="Login" id="btn1" name="btn1" >
</form>
</div>
</div>
<div class="col-md-3 " >
<span id="result">result</span>
</div>
</div>
</div>
</div>
</body>
</html>