Use PHP to execute bash command on HTML button element click event

Question

My brain doesn't seem to want to work today. I am running vlc on a Raspberry Pi with a screen connected and mounted to the wall. I have a web page running with some simple controls to reboot the pi and switch to one of several vlc streams or stop streaming to show a website containing data. The problem I'm facing is getting the buttons to send a bash command to forward commands to the pipeline. eg. echo play >/tmp/vlc_command. these command work while on a remote terminal to do what I'm wanting, but not too familiar with PHP or Ajax. I know with PHP, the command that I want to send is shell_exec("echo play >/tmp/vlc_command") but I can't figure out how to tie it all together with the HTML element.

/tmp/vlc_command is a named pipeline I'm using to send commands to an instance of vlc running in the background.

play - Starts the stream
next - Next stream
prev - Previous stream
stop - Stops streaming (revealing a chromium kiosk window)

Note: I'm using <button> elements, I don't want to use <input> elements as they will break my design. If I don't need PHP, that's fine, I just need to execute a command in bash (linux command line).

first you need a php file with that command and call it directly from browser. (The user which runs the php code, have to have write permission on that file). If it works, you add an onclick event to that button which starts an ajax call to that php. — gabor.zed
– gabor.zed, Commented Oct 23, 2022 at 13:57

LongLegJim · Accepted Answer · 2022-10-27 02:38:34Z

PHP code is evaluated on the server with each request, so there is no way to call a PHP function from the browser directly.

Instead, a new request is made from the browser via Javascript to the PHP file that contains the function you'd like to run.

web-page.php

<?php 
  // web-page.php
?>

<button id="play">Play</button>
<button id="next">Next</button>
<button id="prev">Prev</button>
<button id="stop">Stop</button>

<script>
  const play = document.getElementById("play");
  const next = document.getElementById("next");
  const prev = document.getElementById("prev");
  const stop = document.getElementById("stop");

  play.addEventListener("click", ()=>{executeCommand('play')});
  next.addEventListener("click", ()=>{executeCommand('next')});
  prev.addEventListener("click", ()=>{executeCommand('prev')});
  stop.addEventListener("click", ()=>{executeCommand('stop')});

  async function executeCommand(action) {
    try {
      const res = await fetch(`http://your-site.com/execute-shell-command.php?action=${action}`);
      console.log(res.json());
    } catch (error) {
      console.error(new Error(error));
    }
  }
</script>

<?php

execute-shell-command.php

<?php

// Get the query params
$action = $_GET["action"];

if (isset($action)) {
  $command = shell_exec("echo {$action} >/tmp/vlc_command");
  
  // Returns FALSE if pipe can't be established
  if ($command === FALSE) {
    $output = 'Pipe could not be established';
  }
  
  // This function can return NULL both when an error occurs or the command produces no output
  if ($command === NULL) {
    $output = 'Command produced no output';
  }
  
  // A string containing the output from the executed command
  if ($command) {
    $output = $command;
  }
}

// Anything echo'd will be the response to the request
// and will get console.logged in the browser
echo json_encode(array("requested action"=>$action, "output" => $output));

This example doesn't include any security measures to prevent unauthorized requests to the PHP file, it just demonstrates how to trigger a snippet of PHP code to run from the browser.

Collectives™ on Stack Overflow

Use PHP to execute bash command on HTML button element click event

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related