Adding User Input to the Web Page
Now that you understand how to use Cisco IOS commands with the web server script, you will investigate how to add user input to the web page. The original web page used the script Mihyar.tcl, which allowed user input (downloaded from the Cisco Beyond site).
The original web page contains a Run CLI command box and has a Run button. After you enter a CLI command and click the Run button, the web server application will attempt to run the command, save the output, and present that as a web page to the user.
To view the code used in the Tcl script Mihyar.tcl, you can search for the text “Run CLI command,” from which you will find the following block of code:
<p><font face=’arial’ size=’4’ color=’black’>Run CLI command</font></p>
<form name=’runcli’ action=’runcli.tcl’ method=’GET’ target=’_blank’>
<div align=’left’>
<input type=’text’ name=’CLIcommand’ value=’CLI Command’
onblur=’init_field(this,\”CLI Command\”);’ onFocus=’clear_field(this,\”CLI Command\”);’ style=’WIDTH: 440px; color:#000000; font-family: arial; font-size:
10pt’>
<br><br>
<input type=’submit’ value=’RUN’>
</div>
</form>
This block of code creates an HTML form where user input can be entered. The user information is entered into a text box, and the input is sent as a parameter to the Tcl script named runcli.tcl. The text box is initially populated with the words CLI Command.
As soon as the text box is clicked, the words disappear. The initial population of the input box is accomplished with a combination of HTML and JavaScript:
onblur=’init_field(this,\”CLI Command\”);
The clearing of the text box when clicked is accomplished with the following command:
onFocus=’clear_field(this,\”CLI Command\”);’
The JavaScript that accomplishes this task is as follows:
<script>
// clear default value from field when selected
function clear_field(field, value) {if(field.value == value) field.value = ‘’;}
function init_field(field, value) {if(field.value == ‘’) field.value = value;}
</script>
The JavaScript code that runs on the web browser will be called to populate the text box.
When the text box is selected, it will be called to clear the box.
Using this method, you can modify the sample web page to include a text box for user input. Modify the Tcl script as follows:
if {[catch {cli_open} output]} { error $output $errorInfo } else {
array set cli_fd $output }
Enter enable or privileged mode:
if {[catch {cli_exec $cli_fd(fd) “enable”} output]} { error $output $errorInfo
}
Issue the show clock command to get the current time and record the output in the clock_output variable:
if {[catch {cli_exec $cli_fd(fd) “show clock”} clock_output]} { error $clock_output $errorInfo
}
Close the handle used for CLI commands:
if {[catch {cli_close $cli_fd(fd) $cli_fd(tty_id)} output]} { error $output $errorInfo
}
Configure the output to show the clock:
set header “<html><body>The time is now: $clock_output<br>
</body>
</html>
“
Display the following custom text:
set middle “<html><body>This web page may be easily customized. Nearly anything available to the TCL
Interpreter running on Cisco IOS may be easily displayed.<br>
</body>
</html>
“
set footer “
<script>
Chapter 5: Advanced Tcl Operation in Cisco IOS 159
Clear the default value from field when selected:
function clear_field(field, value) {if(field.value == value) field.value = ‘’;}
function init_field(field, value) {if(field.value == ‘’) field.value = value;}
</script>
<input type=’text’ name=’CLIcommand’ value=’CLI Command’
onblur=’init_field(this,\”CLI Command\”);’ onFocus=’clear_field(this,\”CLI Command\”);’ style=’WIDTH: 440px; color:#000000; font-family: arial; font-size:
10pt’>
<br><br>
<input type=’submit’ value=’RUN’>
</form>
“
set httpheader “HTTP/1.1 200 OK Content-Type: text/html; charset=UTF-8 Content-Transfer-Encoding: binary
“
puts $httpsock $httpheader$header$middle$footer
After you copy the script to the Cisco IOS device and reload the web page in your web browser, you see the results shown in Figure 5-9.
In Figure 5-10, you can verify that clicking the text box clears the text that is in the box.
There is, however, one limitation in the current example. When you enter some text in the box and click the Run button, no action is taken yet. Why is this? After carefully examin-ing the code in the script named Mihyar.tcl, you find that it is connected to another Tcl script with the following code:
<form name=’runcli’ action=’runcli.tcl’ method=’GET’ target=’_blank’>
That line of code was omitted from the sample script. Once you modify the footer section of the script to contain the action to take, the Run button will invoke another Tcl script!
Now that you have seen how to add a text box and button for user input, the next thing to do is modify the web page into a more useful monitoring application.
Figure 5-9 IOS Device HTTP Clock and Command Input
Suppose you are getting network performance complaints from users at a remote office.
You can create a customized web page to monitor the remote IOS device. In this hypo-thetical scenario, a network administrator in Hawaii has alerted you that the IP telephones are working but performing poorly. You suspect the network connection between Hawaii and the central IP telephone server.
To quickly get to the root cause of this, you can deploy a Tcl script on the IOS device in Hawaii. The local network administrator can monitor the performance of the circuit through a web browser. The administrator must open the web page on the router, enter in the IP address of the IP telephone server, and click Monitor. The idea is that the network administrator can go to this web page and start monitoring when he or she is having a problem and additional information will be available.
The web page will use a Tcl script in conjunction with the Cisco IOS feature called IP service level agreement (SLA).