JAVASCRIPT

Creating a MySQL Client with AJAX to Administer Databases from the Web

In this first article of a three-part series, I’ll show you in a friendly fashion how to create the front end of an extensible MySQL client application that uses AJAX to send queries to a selected database in the background.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 6

August 28, 2006

TABLE OF CONTENTS:

In consonance with the concepts that I deployed previously, the group of styles listed above demonstrates a simple way to get the application's login page a bit more appealing. For this specific case, I decided to remove all the margins and padding from the whole web document, as well as styling the <p> and <p> tags, in conjunction with the "maincontainer" DIV.

Finally, I created a simply "button" class to add a basic style to the form button that directly connects to the MySQL server. Of course, if you're well versed in CSS, then you won't have any problems understanding the role of each declaration included a few lines above.

At this point, and after showing you the set of CSS rules that style the elements of the login page, here is the full source code for this web document:

<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>MySQL Client Login Page</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-
8859-1" />
<style type="text/css">
body{
    padding: 0;
    margin: 0;
    background: #eee;
}
p{
    font: bold 24px Verdana, Arial;
    color: #000;
    margin: 20px 0 0 0;
}
p{
    font: bold 12px Verdana, Arial;
    color: #000;
}
#maincontainer{
    width: 300px;
    height: 300px;
    background: #fc3;
    border: 1px solid #000;
    padding: 0 100px 0 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;
    text-align: right;
}
.button{
    width: 145px;
    font: bold 12px Verdana, Arial;
    color: #000;
}
</style>
<script language="javascript">
window.onload=function(){document.
getElementsByTagName('form')[0].elements[0].focus()};
</script>
</head>
<body>
<div id="maincontainer">
<form method="post" action="<?php echo $_SERVER['PHP_SELF']?>">
<p>MySQL Client Login</p>
<p>Server Host <input type="text" name="host" title="Enter
MySQL's hostname" /></p>
<p>User <input type="text" name="user" title="Enter your user
name" /></p>
<p>Password <input type="password" name="pass" title="Enter your
password" /></p>
<p>Database <input type="text" name="database" title="Enter
database name" /></p>
<p><input type="submit" name="connect" value="Connect"
class="button" /></p>
</form>
</div>
</body>
</html>

With regard to the login page listed above, the only tiny detail that I appended to it is simply the inclusion of the following JavaScript code:

window.onload=function(){document.getElementsByTagName('form')
[0].elements[0].focus()};

As you'll know, the reason for coding the previous JavaScript snippet is only to focus the mouse cursor on the first field of the login form, after the web page has been loaded, so the user can start introducing quickly the corresponding MySQL connection parameters. As you'll realize, this process is extremely simple to grasp.

At this stage, you may feel inclined to think that the full login page, which will be responsible for connecting to MySQL and for selecting a particular database, has been finished. Well, not so fast. Remember that right at the beginning of this article I said the login form should be submitted to itself? Exactly, that's the section of the login page that still needs to be coded.

For this reason, in the last section of the article, I'll show you the short PHP snippet that checks whether the form has been submitted, and in accordance with this, redirects the user to the main page of the MySQL client application.

To learn how this will be achieved, please keep reading.

Next: Checking for login form submission >>