Creating a MySQL Client with AJAX to Administer Databases from the Web - Defining a simple user interface
(Page 2 of 4 )
As I expressed in the introduction, before I proceed to create the set of JavaScript functions that will allow the execution of SQL commands against a specific MySQL database, I'll start with defining the structure of the corresponding user interface. Doing so, you'll have a clear idea not only of how the application's visual appearance will look, but how the different modules that comprise the program will interact each other.
To begin with, I'll code a simple login page, which obviously will display on the browser the corresponding login form, which will be handy for introducing the respective values needed to connect to the MySQL server. That said, here is the structural (X)HTML markup that renders the mentioned login page:
<!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" />
</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>
Basically, what I did above was simply code a basic login page, which as I said previously, will let users enter the set of parameters required for connecting to MySQL, as well as for selecting a specific database. The above web form reflects this concept, since it's composed of four input boxes: host name, user name and password, and finally the database to be queried. So far, nothing unexpected, right?
All right, after coding the web page shown above, you should notice that the login form points to itself (note the inclusion of the $_SERVER['PHP_SELF'] variable as the value that corresponds to its action attribute), in order to perform a basic validation on the connection parameters once the form has been submitted.
Of course, this is merely an optional approach that can be easily changed if you want to perform a thorough verification of all the inputted parameters on a different web page. In this case, since I want to keep the entire login process reduced to only one web document, I followed the method that I explained before.
Well, now that the login web page that will allow connecting to MySQL and selecting a particular database has been created, have a look at the following screen shot, which depicts the look and feel of the page in question:
As you can see, the above image shows the basic visual appearance of the respective login page, where users will be able to enter the name of the MySQL host to connect to, the username/password combination and lastly the name of the database to be queried.
In addition, it should be noticed that the previous screen shot depicts a slightly styled version of the login web page that I coded before, since the initial example only showed the bare bones structural markup. Keeping this condition in mind, in the following section I'll be adding some CSS declarations to the original login web document, in this way obtaining a look and feel closely similar to the one shown above.
To learn more about how this will be done, please go ahead and read the following lines. I'll be there, waiting for you.
Next: Adding some CSS declarations to the bare bones (X)HTML markup >>
More JavaScript Articles
More By Alejandro Gervasio
/ 6 
