JAVASCRIPT

Communicating with the Server of a MySQL Client with AJAX

Looking for a comprehensive tutorial that shows you how to create a MySQL client application with the help of AJAX? Then this is the article you’ve been waiting for! Welcome to the concluding part of the series "Creating a MySQL Client with AJAX." In three parts, this series walks you through the process of building a simple application that allows you to run select, insert, update and delete SQL commands against a given MySQL database table, all from your own browser.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 8

September 12, 2006

TABLE OF CONTENTS:

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