I'm making a UNIX web-based terminal for learning purposes. So far I have made a text box and the output is being displayed. Sort of like this.
<?php
$output = shell_exec('ls');
echo "<pre>$output</pre>";
?>
Form
<html>
<head>
<link href="/css/webterminal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function shell_execute(str)
{
if (str.length==0)
{
document.getElementById("txtOut").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtOut").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","exec.php?q="+str,true);
xmlhttp.send();
}
</script>
</head
<body onLoad="setUser();">
<div class="container">
<h2>UNIX Web Based Terminal 1.0</h2>
<br />
<p><b>output</b></p>
<form>
<span id="User"></span>< <input type="text" class="textbox" onkeyup="shell_execute(this.value)" size="20" />
</form>
<div class="output">
<p><span id="txtOut"></span></p>
</div>
</div>
</body>
</html>
But I want it to look as if the page was really a terminal. When I type a command, it should store the result of the shell command, and then append it to a div tag. So as I am typing in commands, it will keep on showing the output. Just like in the UNIX terminal.
How can I append the output of the commands to a div tag?