JavaScript
  Home arrow JavaScript arrow Page 3 - Creating a MySQL Client with AJAX to Admin...
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Mobile Linux 
App Generation ROI 
IBM® developerWorks 
Sun Developer Network 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
JAVASCRIPT

Creating a MySQL Client with AJAX to Administer Databases from the Web
By: Alejandro Gervasio
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 4 stars4 stars4 stars4 stars4 stars / 6
    2006-08-28

    Table of Contents:
  • Creating a MySQL Client with AJAX to Administer Databases from the Web
  • Defining a simple user interface
  • Adding some CSS declarations to the bare bones (X)HTML markup
  • Checking for login form submission

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    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.

    More JavaScript Articles
    More By Alejandro Gervasio


       · This first article of the series is focused on defining the front end of the MySQL...
       · Great start! Cant wait for more!
       · Thank you for the compliments on my AJAX article. I hope you enjoy reading the next...
       · This is great! When can we expect the next article? Good job mang!
       · Thank you for the kind comments about my AJAX article. I'm not completely sure, but...
       · Hi Alejandro,Very interesting article, I've been trying out the code.I'm a...
       · Thank you for the compliments on my Ajax-driven MySQL client, and I’m glad to know...
     

    JAVASCRIPT ARTICLES

    - Using Click Interceptions with a Database-Dr...
    - Using JavaScript Click Interceptions in an I...
    - Using Click Interceptions with JavaScript
    - QuickSort in Action
    - Quicksort
    - Using Mod_Security to Protect Your Server
    - Detecting and Countering Server Intrusions
    - Securing Your Web Server
    - Building a Secure Web Server
    - Protecting the Server
    - Book Review: Learning the Yahoo! User Interf...
    - Dynamically Generate a Selection List in a R...
    - Intergrate DWR into Your Java Web Application
    - Detect Browser Compatibility with the Reques...
    - Using the EXT JS Date Picker Widget






    © 2003-2008 by Developer Shed. All rights reserved. DS Cluster 5 hosted by Hostway
    Stay green...Green IT