Home

Algorithmic Advent: 18 – Jonsole

Published on 18 Dec 2010. Tagged with php, algorithmicadvent.

This is a very basic PHP/jQuery console „emulator“. I had to publish this in a hurry, so it is not as polished as I wanted it to be. I'm sorry for that.

<?php // Filename has to be "index.php"

// Server side

if (count($_GET) > 0) {
    $ret   = implode(' ', $_GET['args']);
    $error = false;

    switch ($_GET['args'][1]) {
        case 'date':
            $args = array_slice($_GET['args'], 2);
            $args = implode(' ', $args);

            $ret = date($args);
            break;
        case 'md5':
            $args = array_slice($_GET['args'], 2);
            $args = implode(' ', $args);

            $ret = md5($args);
            break;
        case 'strtoupper':
            $args = array_slice($_GET['args'], 2);
            $args = implode(' ', $args);

            $ret = strtoupper($args);
            break;
        default:
            $error = true;
            break;
    }

    echo json_encode(array('ret' => $ret, 'error' => $error));

    exit;
}

?><!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Jonsole</title>
          <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

function jonsole_handle_php(args)
{
    $.get('index.php', {'args': args, 'r': Math.floor(Math.random() * 100000)}, function (data) {
        if (data.error) {
            jonsole_println("<span class=\"error\">PHP: Error: \"" + data.ret + "\"</span>");
        } else {
            jonsole_println(data.ret);
        }
        $("#jonsole-wrapper").attr({ scrollTop: $("#jonsole-wrapper").attr("scrollHeight") });
    }, 'json');
}

function jonsole_println(line)
{
    $('#jonsole').html($('#jonsole').html() + line + "<br />");
}

function jonsole_set(line)
{
    $('#jonsole').html(line);
}

function jonsole_run(expr)
{
    var tmp     = expr.split(/ /),
        unknown = false;

    jonsole_println('<span class="system">$</span> ' + expr);

    if (tmp[0] == 'php') {
        jonsole_handle_php(tmp);
    } else if(tmp[0] == 'clear') {
        jonsole_set('');
    } else if(tmp[0] == 'help') {
        jonsole_println('<span class="system">This version of Jonsole supports the following commands:<br />\
- clear<br />\
- help<br />\
- version<br />\
- php<br />\
&nbsp;&nbsp;- md5 <em>string</em><br />\
&nbsp;&nbsp;- strtoupper <em>string</em><br />\
&nbsp;&nbsp;- date <em>format</em></span>');
    } else if(tmp[0] == 'version') {
        jonsole_println('<span class="system">Jonsole version: r1</span>');
    } else {
        unknown = true;
    }

    if (unknown) {
        jonsole_println("<span class=\"error\">Unknown command: \"" + expr + "\"</span>");
    }

    $("#jonsole-wrapper").attr({ scrollTop: $("#jonsole-wrapper").attr("scrollHeight") });
}

$('document').ready(function () {
    jonsole_println("<span class=\"system\">[Welcome to Jonsole] Type \"help\" for more info</span>");

    $('#jonsole-input').bind('keydown', function (key) {

        if (key.which == 13) {
            jonsole_run($(this).val());
            $(this).val('');
            return false;
        }
    }).focus();
});

</script>

<style type="text/css">

* {
    margin: 0;
    padding: 0;
}

#jonsole-wrapper {
    padding: 5px;
    background: #000;
    color: #fff;
    border: 5px solid #999;
    width: 600px;
    height: 400px;
    font-family: monospace;
    font-size: 11px;
    overflow: auto;
}

#jonsole {

}

#jonsole-wrapper .system {
    background: #666;
}

#jonsole-wrapper .error {
    background: #900;
}

#jonsole-input {
    background: #000;
    color: #fff;
    border: 1px solid #666;
    width: 550px;
    font-family: monospace;
    font-size: 11px;
    display: inline;
}

</style>
    </head>

    <body>

        <form action="" method="post">
            <div id="jonsole-wrapper">
                <div id="jonsole"></div>
                <p><span class="system">$</span> <input id="jonsole-input" type="text" autocomplete="off" /></p>
            </div>
        </form>

    </body>

</html>