Running Queries in the Background with a MySQL Client with AJAX - Creating the application's main panel
(Page 2 of 5 )
As I expressed in the beginning, after building the login system that you saw in the first article, the next logical step rests on creating the main control panel that corresponds to the MySQL client application.
Obviously, this control area will let users enter different SQL statements, in order to query the selected database, once the login process has been successfully performed. In accordance with these requirements, the web page responsible for sending queries to the database, as well for displaying the corresponding results, is depicted by the following screen shot:
As you can see, the above image not only shows the look and feel that I plan to provide to the main panel, but also demonstrates how this interface will work. Basically, the panel in question is split up in two main sections, where the upper one will display the results outputted by a particular query (when applicable), while the lower one will contain the input box required for typing SQL statements.
Okay, since you’ve already seen how the main user panel will look, it’s time to translate the previous screen shot to functional markup code. That said, here is the complete (X)HTML that renders the main area of the application:
<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>AJAX-based MySQL Client</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-
8859-1" />
<style type="text/css">
body {
padding: 0;
margin: 2% 0 0 0;
background: #eee;
}
p{
font: bold 24px Verdana, Arial;
color: #000;
padding: 10px 0 0 0;
margin: 0;
text-align: center;
}
form{
display: inline;
}
#header{
width: 600px;
height: 50px;
margin-left: auto;
margin-right: auto;
background: #ccc url(bg1.gif) center left repeat-x;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
#console{
width: 590px;
height: 450px;
background: #808080;
border: 1px solid #000;
padding: 5px;
margin-left: auto;
margin-right: auto;
overflow: auto;
font: bold 12px Verdana, Arial;
color: #fff;
}
#companel{
width: 600px;
padding: 5px 0 5px 0;
margin-left: auto;
margin-right: auto;
background: #fc3;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
text-align: right;
}
.comfield{
width: 507px;
height: 20px;
font: bold 12px Verdana, Arial;
color: #00f;
}
.button{
width: 75px;
padding: 2px;
font: bold 12px Verdana, Arial;
color: #000;
}
</style>
</head>
<body>
<div id="header"><p>MySQL Client Console</p></div>
<div id="console"></div>
<div id="companel">
<form>
<input type="text" name="query" class="comfield" title="Enter
your SQL commands here" />
<input type="button" name="execute" value="Execute" class="button" />
</form>
</div>
</body>
</html>
For this case in particular, I decided to apply my own styles to the different sections of the main panel. If you’re feeling more creative than I was, you can quickly modify the above CSS declarations and create a new look and feel on your own.
So far, you learned how to build the main area of the application, which will allow a user to enter different queries and send them straight to the server. Also, when using SELECT statements, the user will be able to see the corresponding rows returned by these queries. However, the complete group of JavaScript functions responsible for actually sending HTTP requests and for displaying the respective server responses hasn't yet been defined.
Do you want to see the signature for each of these functions? If your answer is a resounding yes, then go ahead and read the following section.
Next: Working with HTTP requester objects >>
More JavaScript Articles
More By Alejandro Gervasio
/ 3 
