CODEWITHSUNDEEP
javascripthtmlmysqlnode.js
user1528581
user1528581

Reputation: 41

How to build client server app using node js and html?

I have html file called temp.html I want to display select query result in that html page. This is my select query.

    SELECT cs_name FROM course_master where cs_id = 4

This query will return following result.

[ { cs_name: 'JAVA programming' } ]

I want to display this result in html page. Basically I want to use the "GET" request and response using node js. This is my node js file structure.

var mysql      = require('mysql');
var connection = mysql.createConnection({
host     : '127.0.0.1',
user     : 'root',
password : '',
database : 'eduportal'
});
connection.connect();

connection.query('SELECT cs_name FROM course_master where cs_id = 4', function(err, rows, fields) {
if (!err)
console.log('The solution is: ', rows);
else
console.log('Error while performing Query.');
});
connection.end();

This is my HTML file.

<!doctype html>
 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>        
</head>
<body>
    <div id="course_name">          
        Course Name:<input type="text" id="cname">                
    </div>
</body>
</html>

I want to display course name in text box which I defined in HTML file.

Can anyone help to bind this text box with mysql using node js?

Upvotes: 0

Views: 3644

Answers (1)

Dineshaws
Dineshaws

Reputation: 2083

You can achieve this by socket.io. You need to learn more about this to understand following snippet.

In this i have provided a sample code to full fill your requirement.

Might be possible that some tweaks still in this code so you can change those by your understanding.

Let me clarify about following server.js snippet

In this you can put your all queries to get or set in db.

//server.js

var app = require("express")();
var mysql = require("mysql");
var http = require('http').Server(app);
var io = require("socket.io")(http);

/* Creating POOL MySQL connection.*/

var pool = mysql.createConnection({
host     : '127.0.0.1',
user     : 'root',
password : '',
database : 'eduportal'
});

app.get("/", function(req, res) {
    res.sendFile(__dirname + '/index.html');
});


io.on('connection', function(socket) {
    console.log("A user is connected");
        get_cs_name(function(res,cs_name) {
            if (res) {
                io.emit('get_cs_name', cs_name);
            } else {
                io.emit('error');
            }
        });
});

var get_cs_name = function(callback) {
    pool.getConnection(function(err, connection) {
        if (err) {
            connection.release();
            callback(false);
            return;
        }
        connection.query("SELECT cs_name FROM course_master where cs_id = 4", function(err, rows) {
            connection.release();
            if (!err) {
                callback(true,rows[0].cs_name);
            }
        });
        connection.on('error', function(err) {
            callback(false,null);
        });
    });
}

http.listen(3000, function() {
    console.log("Listening on 3000");
});

Now run "node server.js" command from CLI. Your http request will be handle on 3000 port. please keep this in mind.

//index.html

<html>
  <head>
    <title>Socket.io</title>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script>
    $(document).ready(function(){
          var socket = io();

          socket.on('get_cs_name',function(cs_name){
             alert(cs_name);
             $("#cname").val(cs_name);
          });
    });
    </script>
  </head>
  <body>
    <div id="course_name">          
        Course Name:<input type="text" id="cname">                
    </div>
  </body>
</html>

Now its time to browse your html file to see your actual result that it is working or not, please hit http://localhost:3000 in browser.

If any error found please ping me back here.

Thanks

Upvotes: 3

Related Questions