Communicating with the Server of a MySQL Client with AJAX - Refresher course: the MySQL client's login module
(Page 2 of 4 )
Naturally, before I proceed to write down the PHP snippet that processes queries typed in by the user, first I’d like you to take a quick look at some of the application’s previous modules. Doing so, you’ll have a better idea of how each piece fits into each other, prior to coding the mentioned server-side script.
Bearing in mind this logical concept, I’ll begin listing the full source code that corresponds to the login module of the MySQL client application. Here it is:
<?php
if($_POST['connect']){
if($_POST['host']&&$_POST['user']&&$_POST['pass']&&$_POST
['database']){
session_start();
$_SESSION['host']=$_POST['host'];
$_SESSION['user']=$_POST['user'];
$_SESSION['pass']=$_POST['pass'];
$_SESSION['database']=$_POST['database'];
header('location:mysql_client.php');
}
else{
header('location:'.$_SERVER['PHP_SELF']);
}
}
?>
<!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>
As you’ll certainly remember, the file listed above comprises the login module of the application, and obviously is responsible for collecting the parameters required for connecting to MySQL, as well as for selecting a specific database. In addition, the previous file also redirects the user to the main page of the client application, called “mysql_client.php,” after the login form has been submitted successfully. Nothing unexpected, right?
After reviewing the respective signature of the login module that was shown a few lines ago, I hope now that this mechanism is fresh in your mind. Now, let’s continue this journey and take a quick look at the other core module of the MySQL client application. In this case, I’m talking about the AJAX-based mechanism, tasked with sending out all the typed queries to the server, as well as displaying results back in the client.
To see how this important module was originally created, please go ahead and read the following section.
Next: A final review: the MySQL application’s client module >>
More JavaScript Articles
More By Alejandro Gervasio
/ 8 
