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

Question

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?

You might need to install the 'Express' $ npm install express --save ExpressJS — Splice Mechanic
– Splice Mechanic, Commented Aug 10, 2020 at 20:47

Dineshaws · Accepted Answer · 2015-04-09 12:35:33Z

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

Thanks for help. I am trying but I have a question. Is that any other way without socket.io ?
I am getting this error. Node_script>node testing.js module.js:338 throw err; ^ Error: Cannot find module 'express' at Function.Module._resolveFilename (module.js:336:15) at Function.Module._load (module.js:278:25) at Module.require (module.js:365:17) at require (module.js:384:17) at Object.<anonymous> (E:\Henry\jinny\web-programming\HW1\public_html\Node_s cript\testing.js:7:11) at Module._compile (module.js:460:26)

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related