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.
Next: Checking for login form submission >>
More JavaScript Articles
More By Alejandro Gervasio
/ 6 
