Creating an Ajax feedback form with My-Bic
My-Bic is an Ajax framework for PHP. It allows you to easily integrate Ajax features into your PHP applications. Let’s see how to create a feedback form with My-Bic.
Installation and Setup:
Download the latest version of My-Bic (v0.6.3) from http://www.litfuel.net/mybic/index.html?page=download and copy the files over a folder under the webroot of your server.
You’ll need to change the following lines in the mybic_server.php file :
define("SERVER_ROOT", "d:/wamp/www/mybic/");
This defines the base path of the folder where this file exists.
define("INC_PATH", SERVER_ROOT);
This defines where your custom classes will be places. Let’s leave this as it is for this tutorial.
Client-Side
Let’s start with a basic form which you’ll need for feedback:
Feedback Form
In this form we’ll have to create an action when the user clicks on the submit button, so let’s change the last line of code to:
Let’s check out the JavaScript required to power this Ajaxified Feedback form.
In the HEAD section of the HTML, we’ll have to include the “mybic.js” file required to power this application. We’ll also have to create the sendComment() function which will be called when the user clicks on the submit button. Let’s take a look at the following code:
We have the required JavaScript file included using the line:
We’re instantiating a new Ajax Object using:
var ajaxObj = new XMLHTTP("mybic_server.php");
We’re setting up debugging by using ajaxObj.debug = 1; this gives a window which shows us what requests are posted and the results from the server.
function sendComment()
{
ajaxObj.format = "TEXT";
var form_vars = ajaxObj.getForm('feedback');
ajaxObj.call('action=ajaxfeedback'+form_vars, showResults);
}
In the code above, we’re setting up the function to actually execute the Ajax call. The first line in the function specifies that we’re expecting the return results in Text instead of JSON.
var form_vars = ajaxObj.getForm('comments'); will loop through the form to get all the fields and values.
ajaxObj.call('action=ajaxfeedback'+form_vars, showResults); Calls the class ajaxfeedback on the server with the form values and will call the showResults function to output the server response back to screen.
function showResults(resp)
{
document.getElementById('message').innerHTML = resp;
}
The showResults function replaces the contents of the message div with the response back from the server.
Let’s save this file as ajaxfeedback.html
Here’s the entire code for this file:
Feedback Form
Server Side
On the client side, we’re calling a class ajaxfeedback to process the request. Let’s get to creating the server-side program to process the request. The file you’ll have to create will be ajaxfeedback.php. In this file let’s put in the following code:
class ajaxfeedback {
var $queryVars;
function ajaxfeedback( $queryVars )
{
$this->queryVars = $queryVars;
}
/**
* Method to return the status of the AJAX transaction
*
* @return string A string of raw HTML fetched from the Server
*/
function return_response()
{
$resp = 'ok';
return $resp;
}
function is_authorized()
{
return true;
}
}
?>
Looking at the code, you’ll see that we’re creating a class called ajaxfeedback which has a constructor which takes the query variables and sets it internally.
The return_response method is used to return the status of the Ajax transaction. In this method let’s add a little bit of form validation:
function return_response()
{
// Save Inputs to database here and create the return
// result
if ( $this->queryVars['name'] == "" ) {
$resp = "Please enter your name";
} else
if ( $this->queryVars['email'] == "" ) {
$resp = "Please enter your email id";
} else
if ( $this->queryVars['feedback'] == "" ) {
$resp = "Please enter your feedback";
} else {
// Save Inputs to database here
$resp = "Thank you for your comments";
}
return $resp;
}
In the last else statement, you can insert your database routine to save the form values. Once saved we’re passing on a confirmation message back to the client-side.
Now your completed ajaxfeedback.php should look like :
class ajaxfeedback {
var $queryVars;
function ajaxfeedback( $queryVars )
{
$this->queryVars = $queryVars;
}
/**
* *
* Method to return the status of the AJAX transaction
*
*
* @return string A string of raw HTML fetched from the Server
*/
function return_response()
{
// Save Inputs to database here and create the return
// result
if ( $this->queryVars['name'] == "" ) {
$resp = "Please enter your name";
} else
if ( $this->queryVars['email'] == "" ) {
$resp = "Please enter your email id";
} else
if ( $this->queryVars['feedback'] == "" ) {
$resp = "Please enter your feedback";
} else {
// Save Inputs to database here
$resp = "Thank you for your comments";
}
return $resp;
}
function is_authorized()
{
return true;
}
}
?>
Your Ajax feedback form is ready to use. Fire up your browser and open ajaxfeedback.html in your browser. If you’d like to see a demo of this form, head over to :
http://vinuthomas.com/code/my-bic/ajax_feedback.html
You’ll see the debug window open up as soon as you submit the form. The debug window gives you information useful while debugging you ajax application.
Source code for this tutorial: ajax_feedback.zip
