Building the User Interface for an AJAX-Based Network Processor - Writing some functional client-side code
(Page 3 of 5 )
If you're anything like me, you want to learn how the image that you saw in the previous section can be turned into functional markup code. Below I listed the basic (X)HTML code that displays the friendly user interface discussed a few lines before. Have a look at it, please:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>AJAX-based Networking Processor</title>
</head>
<body>
<h1>AJAX-BASED NETWORKING PROCESSOR</h1>
<div id="maincontainer">
<form>
<div id="paramcontainer">
Host Name/ IP Address <input type="text" name="data"
class="databox"></input>
</div>
<div id="leftpanel">
<input type="button" name="host" value="Host to IP"
class="controlbutton" title="Covert Hostname to IP
address"></input>
<input type="button" name="ip" value="IP to Host"
class="controlbutton" title="Convert IP address to
Hostname"></input>
<input type="button" name="iplist" value="IP List"
class="controlbutton" title="Retrieve IP list"></input>
<input type="button" name="ping" value="Ping"
class="controlbutton" title="Execute ping command"></input>
<input type="button" name="ipconfig" value="IP Config"
class="controlbutton" title="Execute ipconfig command"></input>
<input type="button" name="netstat" value="Netstat"
class="controlbutton" title="Execute netstat command"></input>
</div>
<div id="centerpanel"></div>
<div id="rightpanel">
<input type="button" name="mxrec" value="MX Records"
class="controlbutton" title="Retrieve MX records"></input>
<input type="button" name="servports" value="Service Ports"
class="controlbutton" title="Retrieve service ports"></input>
<input type="button" name="servnames" value="Service Names"
class="controlbutton" title="Retrieve service names"></input>
<input type="button" name="scanport" value="Scan Port 80"
class="controlbutton" title="Scan port 80"></input>
<input type="button" name="whois" value="NS Records"
class="controlbutton" title="Retrieve NS records"></input>
<input type="button" name="reset" value="Clear Panel"
class="controlbutton" title="Clear display panel"></input>
</div>
</form>
</div>
</body>
</html>
As you'll realize, the above structural markup is really simple to understand. As I explained previously, the prior web document first displays a simple input box in which the user can enter the name or IP address that corresponds to the host to be queried. Then it places the two columns that house the respective set of query buttons, and finally it renders the centered column where all the results are shown to different users.
However, it should be noticed that the above (X)HTML markup isn't tied to any style sheet yet, so it looks somewhat primitive. To address this issue quickly, in the following section I'm going to include some straightforward styles in the corresponding web document to achieve a more polished look and feel, similar to the one shown in the previous screen shot.
Are you curious about how this will be done? Read the next few lines to satisfy your appetite.
Next: Polishing the networking application's look and feel >>
More JavaScript Articles
More By Alejandro Gervasio
/ 3 
