You are on the right track. In order to achieve the desired objective do the following.
1) You can use express as Jason mentioned in the previous answer and handle everything
for now as an application with the client and server on the same machine for testing as I have done in my
application until you are ready to segregate the client server from
one another.
2) In order to use MySQL as the storage engine as opposed to what I
used SqlLite use the example from
https://www.w3schools.com/nodejs/nodejs_mysql_insert.asp
var mysql = require('mysql');
var con = mysql.createConnection({
host: "localhost",
user: "yourusername",
password: "yourpassword",
database: "mydb"
});
con.connect(function(err) {
if (err) throw err;
console.log("Connected!");
var sql = "INSERT INTO customers (name, address) VALUES ('Company Inc', 'Highway 37')";
con.query(sql, function (err, result) {
if (err) throw err;
console.log("1 record inserted");
});
});
3) Create an HTML file to handle input as shown below
4) Create a client.js file to send the request to NodeJS server
5) Create server.js file to receive request and handle insert using in my case SQLite
6) In order to create database run the following in glitch console
~sqlite demo <---demo is name of db in sqlite3
% create table userlist(user, password);
CTRL+D <---exit
7) Locating a suitable online resource took some effort but I located a place where one can edit nodejs projects for viewing
I found this: https://flaviocopes.com/nodejs-hosting/ and located a online environment tool called Glitch
Try the following example I constructed at Glitch which can be viewed edited and run once you click on the Show Live button in green.
https://glitch.com/edit/#!/node-js-demo-stack-overflow?path=public/client.js:1:0
client.js
// client-side js
// run by the browser each time your view template referencing it is loaded
console.log('Testing Add');
function submit()
{
// request the user from our app's sqlite database
const userRequest = new XMLHttpRequest();
userRequest.open('post', '/addUser');
userRequest.setRequestHeader("Content-Type", "application/json;charset=UTF-8")
userRequest.send(JSON.stringify({'user':document.getElementById("user").value, 'password': document.getElementById("password").value}));
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome to Glitch!</title>
<meta name="description" content="A cool thing made with Glitch">
<link id="favicon" rel="icon" href="https://glitch.com/edit/favicon-app.ico" type="image/x-icon">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- import the webpage's client-side javascript file -->
<script src="/client.js"></script>
</head>
<body>
<input type="text" id="user"/>
<input type="text" id="password"/>
<button onclick="submit()">Send</button>
</body>
</html>
server.js
// server.js
// where your node app starts
// init project
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
//
// we've started you off with Express,
// but feel free to use whatever libs or frameworks you'd like through `package.json`.
// http://expressjs.com/en/starter/static-files.html
app.use(express.static('public'));
// init sqlite db
var fs = require('fs');
var dbFile = 'demo';
var exists = fs.existsSync(dbFile);
var sqlite3 = require('sqlite3').verbose();
var db = new sqlite3.Database(dbFile);
// create application/json parser
var jsonParser = bodyParser.json();
// http://expressjs.com/en/starter/basic-routing.html
app.get('/', function(request, response) {
response.sendFile(__dirname + '/views/index.html');
});
// endpoint to addUser in the database
// currently this is the only endpoint, ie. adding dreams won't update the database
// read the sqlite3 module docs and try to add your own! https://www.npmjs.com/package/sqlite3
app.post('/addUser', jsonParser, function(request, response) {
// if ./.data/sqlite.db does not exist, create it, otherwise print records to console
if (!exists) {
console.log("Table not found");
db.run('CREATE TABLE userlist (user text, password text');
console.log('New table User List Created!');
insert(request);
}
else{
insert(request);
}
db.each('SELECT * from userlist', function(err, row) {
if ( row ) {
console.log('record:', JSON.stringify(row));
}
});
});
var insert = function (req)
{
db.run('INSERT INTO userlist (user, password) VALUES ("'+req.body.user+'","'+req.body.password+'")');
}
// listen for requests :)
var listener = app.listen(process.env.PORT, function() {
console.log('Your app is listening on port ' + listener.address().port);
});
Insert this in the else block of the post handler in server.js under insert(request) to be able to send back table values and view in client
db.all('SELECT * from userlist', function(err, rows) {
response.send(rows);
});
Insert this in submit function in client.js to view table values on submit
userRequest.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var rows = JSON.parse(this.responseText);
var tbl = "<table border=1>";
tbl += "<thead><td>Name</td><td>Password</td></thead>";
for (var i = 0; i < rows.length; i++)
{
tbl+="<tr><td>"+rows[i].user+"</td><td>"+rows[i].password+"</td></tr>";
console.log('record:', JSON.stringify(rows[i]));
}
tbl += "</table>";
document.getElementById("tbl").innerHTML = tbl;
}
}
