HTML 5 as local script interface with Node.js

Node.js can receive data from the form and pass it as parameters to a PHP script on the local computer.

This opens up the possibility of using HTML 5 as an interface for local applications. Note that the form data is not passed to the PHP script in the $ _ POST (or $ _ GET) variable, but as command line parameters, which has the same effect.

In fact, they are passed as such to the JavaScript server script. But the real demonstration is made to add graphical interfaces to your PHP scripts, which you usually use on the command line (there are many of them on this site) without having to change the script code.

Here is the general code of the PHP script (phpback.php) that receives command line parameters:

<?php
echo "phpback.php here...\n";
echo $argc-1, " infos received from HTML interface:\n\n";
for($i = 1; $i < $argc; $i++)
{
  $p = $argv[$i];
  list($k, $v) = explode('=', $p);
  echo $k, "=", $v, "\n";
}

echo "\nReady to use them, add your code to the source...";
?>

In addition to echoing the received data, which is only for demonstration, this code is common to any PHP script that receives settings.

We want to give this script a graphical interface. It looks like this:

Node.js interface graphique

The data entered by the user, namely the login and password (this is just an example, all other data is possible), will be passed as command line parameters to the PHP program, thanks to Node.js.

To start the interface, the server is launched with the command:

node htmlinterface.js

This can be placed in a batch file and associated with a desktop icon.

And to run a PHP script, enter the interface name in the browser URL:

http://127.0.0.1:1000/phpfront.php

This can also be automated by placing it in the bookmark.

When you click on the "Run script" button, you should see the result of the PHP script in the browser:

Of course, the mapping could be worked out more using HTML tags, but for this tutorial you want to stay simple.

How does it work?

If you have already read our two previous textbooks, How to make a page or application server with Node.js and Locally run a PHP program from a browser, which is recommended, you already have an idea of ​ ​ the code, in fact, this is a synthesis of these two previous articles.

  1. When the JavaScript server receives the URL of the interface, it displays the corresponding page, for this it uses the principle outlined in the first article.
  2. The user enters the data and clicks the Run Script button. Form data is sent and received by the JavaScript server.
  3. Then it forms a command line, converting this data into parameters, and runs a PHP script, as shown in the second article.
  4. PHP script results are displayed instead of the interface. It would be better to build them into the interface, but this will be the subject of the next article .

When the user requests an interface in the browser, the server receives a GET command. It assigns a code to the variable with a value of 0, as a result of which the runphp function calls the fs.readFile method, which displays the HTML page.

Then, when the user submits the form data, the server receives a POST method, it assigns code with the variable 1, and the runphp function calls the exec method to execute the PHP script in the backend. The results are sent to the browser by the sendData function.

However, these forms must be interpreted. This is done with the following code:

if(request.method == 'POST')
{
  var data;
  var formData;
  var phpvar="";
  request.on('data', function(chunk) { data = chunk.toString(); });
  request.on('end', function()
  {
    formData = qs.parse(data);
    code = 1;
    for(var key in formData)
    {
      phpvar =  phpvar + key + "=" + '"' + formData[key] + '" ';
    }
    });
}
A querystring module is required, the parsing method of which converts form data into an associative array with variable names into keys and their values ​ ​ assigned to the keys.
Then you still have to turn this table into command line parameters. This is achieved by a loop that turns formData into phpvar.

Full source code

http = require("http"),
path = require("path"),
url = require("url"),
qs = require('querystring'),
runner = require("child_process");
fs = require("fs");

function sendError(errCode, errString, response)
{
  response.writeHead(errCode, {"Content-Type": "text/plain;charset=utf-8"});
  response.write("Error: " + errString + "\n");
  response.end();
  return false;
}

function sendData(err, stdout, stderr, response)
{
  if (err) return sendError(500, stderr, response);
  response.writeHead(200,{"Content-Type": "text/plain;charset=utf-8"});
  response.write(stdout);
  response.end();
}

function sendFile(err, file, response)
{
  if(err) return sendError(500, err, response);
  response.writeHead(200);
  response.write(file, "binary");
  response.end();
}

function runPHP(exists, code, localpath, param, response)
{
  if(!exists) return sendError(404, 'File not found', response);
  console.log("php " + localpath + " " + param);
  if(code==1)
  {
    runner.exec("php " + localpath + " " + param,
      function(err, stdout, stderr) { sendData(err, stdout, stderr, response); });
    return;
  }
  fs.readFile(localpath, "binary",
    function(err, localpath){ sendFile(err, localpath, response);});
}

function php(request, response)
{
  var urlpath = url.parse(request.url).pathname;
  code = 0;
  if(request.method == 'POST')
  {
    var data;
    var formData;
    var phpvar="";
    request.on('data', function(chunk) { data = chunk.toString(); });
    request.on('end', function()
    {
      formData = qs.parse(data);
      code = 1;
      for(var key in formData)
      {
        phpvar =  phpvar + key + "=" + '"' + formData[key] + '" ';
      }
     });
    }
    var param = url.parse(request.url).query;
    var localpath = path.join(process.cwd(), urlpath);
    fs.exists(localpath, function(result) { runPHP(result, code, localpath, phpvar, response)});
}

var server = http.createServer(php);
server.listen(1000);
console.log("Server ready to get the HTML interface on port 1000.");

Files matching this tutorial:

And with Node.js, there are still many, many things to do at the local post. In the next article, we will look at how to create an interaction between an HTML interface and a PHP script.