see how to make a terminal that accepts commands and executes them actually on a real machine.
This first part focuses on HTML, Javascript and CSS code needed.
The second part will focus instead on the side of the python programming
with
Django framework.
The server side was built with the Python web framework Django
, the client side uses the JS Library
JQuery for AJAX calls. HTML is pretty simple and is in the file
templates / index.html
\u0026lt;! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd "> 
\u0026lt;html xmlns =" \u200b\u200bhttp://www.w3.org/1999/xhtml "xml: lang =" en-US " lang = "en-US">
\u0026lt;head> \u0026lt;html xmlns =" \u200b\u200bhttp://www.w3.org/1999/xhtml "xml: lang =" en-US " lang = "en-US"> \u0026lt;title> Lorenzo Sfarra: DJSterminal \u0026lt;/ title>
<link rel="stylesheet" href="/media/css/terminal.css"/> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // You may specify partial version numbers, such as "1" or "1.3",
// with the same result. Doing so will automatically load the // latest version matching that partial revision pattern
// (e.g. 1.3 would load 1.3.2 today and 1 would load 1.4.2). google.load("jquery", "1.4.2"); </script> <script src="/media/js/terminal.js" type="text/javascript">/* Terminal */</script>
<script type="text/javascript"> google.setOnLoadCallback(function() {
/* Handle the enter keycode */
$("#commandline").keypress(function(event) {
if (event.keyCode == '13') {
event.preventDefault();
onEnterKey();
}
});
});
</script>
</head>
<body>
<div id="terminal">
<div id="terminaltop"><img src="/media/css/imgs/buttons.png" alt="buttons" align="left"/> <br/>Javascript Terminal</div>
<!-- Command line -->
<textarea id="commandline" cols="80" rows="15">lorenzo@josie:~$ </textarea>
<!-- End command line -->
\u0026lt;/ div>
\u0026lt;/ body>
\u0026lt;/ html>
In the first line we import the necessary files. In particular, we use Google
to load the JQuery library
.
In lines 20-29 we capture the Enter key to handle the input as a command line.
terminal.js
file that contains the required javascript source is located in
media / js
, and is as follows:
/ * Copyright (C) 2010 Lorenzo Sfarra (lorenzosfarra@ubuntu.com)
* This program is free software, you can Redistribute it and/or
* modify it under the terms of the GNU General Public License
* as published by the Free Software Foundation; either version 2
* of the License, or (at your option) any later version.
* This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. * See the * GNU General Public License for more details. * You should have received a copy of the GNU General Public License * along with this program; if not, write to the Free Software
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA * 02110-1301, USA.
*/
// The command line prompt var cliPrompt = "lorenzo@josie:~$ ";
// the server address where the real console exists
var cliHost = "http://localhost:8000/";"Forwarding E-mails with Postfix "
function isTrustedCommand(command) {
/**
* Function to check that the given command is trusted.
* @param command the command to check
* @return boolean
*/
// TODO: check that this is a trusted command!
return true;
}
function executeCommand(text, cliPrompt, command) {
/**
* Function to execute the given command through an AJAX call
* and retrieve the result to update the textarea value.
* @param text the current textarea value
* @param cliPrompt the prompt
* @param command the command to execute
*/
// build the URL for the command
remoteCommand = cliHost + "cmd/" + command;
output = "";
// Perform the AJAX call
$.ajax({
url: remoteCommand,
type: 'GET',
dataType: 'text',
error: function(data, textStatus, errorThrown) {
// readyState == 4? Error.
if (data.readyState == 4) {
output = "Connection error.\n"
}
},
success: function(data) {
output = data + "\n";
$("#commandline").val([text, output, cliPrompt].join("\n"));
// Textarea with focus at bottom
$("#commandline").animate({ scrollTop: 99999}, 10);
}
});
}
function onEnterKey() {
/* Function called when a user press the Enter key on its keyboard. */
text = $("#commandline").val();
// Get the command
promptIndex = text.lastIndexOf(cliPrompt);
// build the command
command = text.substring(promptIndex + cliPrompt.length);
if (command == "clear") {
// simply clear the textarea value
$("#commandline").val(cliPrompt);
} else if (isTrustedCommand(command)) {
executeCommand(text, cliPrompt, command);
} else {
output = "Invalid command.";
$("#commandline").val([text,output,cliPrompt].join("\n"));
}
}
La funzione principale รจ ovviamente
executeCommand()
making the AJAX call really necessary to run the command on the server reference.
WARNING:
isTrustedCommand is a very important function (command)
which returns true if the command is "permission" to run. This is obviously necessary to protect the server. At present, the function does not perform any checks and immediately returns true.
The stylesheet
terminal.css
is located in the media / css
. Skip to
Part II
.
The style was taken as a reference model in the terminal this
.
0 comments:
Post a Comment