Question

I want to create a simple ‘history’ feature for my linux-web based terminal.

The user can type in any linux command in the textbox. After pressing return, that command is actually executed on linux shell and using exec() function, I return the output on the browser.

When the user types in a keyword, such as ‘history’ in the textbox, then the last ten linux commands typed into the texbox will be shown. How can i implement that?

Answer 1

$('#submit').click(

    function (){

        $.ajax({
          url: "test.php",
          method: "get",
          dataType: "text", 
          data: {cmd: $('#command').val() },
          success: function(data){ 
            $('#display').html(data);
          }
        });

    }

)


<div id="display"></div>    
<input type="text" id="command"/>
<a href="#" id="submit">submit</a>

On test.php, get the command, execute it, and display the result.

$cmd = $_GET['q'];

exec($cmd, $output);

echo "<pre>";
print_r($output);
echo "</pre>";

UPDATE:: there you go, your complete code

<script src="jquery.js"></script>
<script>

var commands = new Array();

$(function (){
    $('#cmd').keydown(
    function (event){
        if(event.keyCode == 13){
            event.preventDefault(); 
            /*you can call your function here*/
            var tmp = $(this).val();
            commands.push(tmp);
            if(tmp == 'history')
            {
                showlog();
                return false;               
            }           
            $.ajax({
              url: "exec.php",
              method: "get",
              dataType: "text", 
              data: { q: tmp},
              success: function(response){ 
                 $('#txtOut').html(response);
              }
            });
            /*still you can it here*/
          }
        }
    );  
});

function showlog()
{           
    $('#txtOut').html(function ()
    {
        var txt="<br/>";
        for(var i=1; i<=commands.length-1; i++)
        {
            txt += commands[i]+"<br/>";
        }
        return txt;
    });
}

</script>      
<input type="text" id="cmd"/>
<a href="#" id="showlog">show log</>
<div id="txtOut"></div>