Home arrow JavaScript arrow Page 3 - Creating a MySQL Client with AJAX to Administer Databases from the Web
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
Rating: 4 stars4 stars4 stars4 stars4 stars / 6
August 28, 2006
TABLE OF CONTENTS:
  1. · Creating a MySQL Client with AJAX to Administer Databases from the Web
  2. · Defining a simple user interface
  3. · Adding some CSS declarations to the bare bones (X)HTML markup
  4. · Checking for login form submission

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Creating a MySQL Client with AJAX to Administer Databases from the Web - Adding some CSS declarations to the bare bones (X)HTML markup
(Page 3 of 4 )

As I expressed in the previous section, the next step involved in constructing the login page that corresponds to the MySQL client application consists of simply adding some CSS declarations to the original (X)HTML markup.

Since the structure of the login web page was originally made up of a single DIV container that wraps the respective login form, below I listed the set of CSS rules that style each of the elements included into the web page in question. Please, have a look at these simple styles:

<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>

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.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 4 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials