Change Server Forms To AJAX Forms By Just Changing A Function - Power Of QCubed

This is my first post about QCubed, about one of the most impressive features – changing get/post server forms to AJAX forms by just changing a function.

Lately, I am into much development work using PHP. This is the last year of my college, and I have to submit two projects this year which carry 25% of total marks. I had always admired PHP before, and even attempted an application or two, but its QCubed that changed my entire outlook of PHP.

So when I showed the TimeAssistant program to my friend and brother Vaibhav Kaushal, among other notable things (old coding style, etc) he suggested to give QCubed a try. After all programming frameworks are there to make your lives easier and its quite impossible to see a web application today that doesn’t use a framework. So I downloaded the code, and got started with it.

Agreed, QCubed has quite a learning curve. I had never used OOPS in PHP before (C fan = procedural programming fan) so it was harder for me. But once you get a hang of it, its quite easy to move forward. The best thing about QCubed is that it it generates codes and forms based on your database schema, so you already have a crude site ready to extend and edit. I loved the QForms, its easy to make, validate and edit. So here comes a simple Calculator app that I made:

require_once "framework/qcubed.inc.php";
class Calculator3 extends QForm{
    protected $txtBox1;
    protected $txtBox2;
    protected $btnButton;
    protected $lstList;
    protected $lblLabel;

    protected function Form_Create(){
        $this->txtBox1 = new QIntegerTextBox($this);
        $this->txtBox1->Text = "";
        $this->txtBox1->Required = true;
        $this->txtBox2 = new QIntegerTextBox($this);
        $this->txtBox2->Text = "";
        $this->txtBox2->Required = true;
        $this->lstList = new QListBox($this);
        $this->lstList->AddItem('+', 'add');
        $this->lstList->AddItem('-', 'sub');
        $this->lstList->AddItem('*', 'mul');
        $this->lstList->AddItem('/', 'div');
        $this->btnButton = new QButton($this);
        $this->btnButton->Text = "Calculate";
        $this->btnButton->CausesValidation = true;
        $this->btnButton->AddAction(new QClickEvent(), new QServerAction('cal'));
        $this->lblLabel = new QLabel($this);
        $this->lblLabel->Text = "";
        $this->lblLabel->HtmlEntities = false;
    }

    protected function Form_Load(){
        $this->lblLabel->Text = "";
    }

    protected function Form_Validate(){
        if($this->lstList->SelectedValue == 'div' && $this->txtBox2->Text == 0){
            $this->txtBox2->Warning = "Cannot divide by zero";
            return false;
        }
        else{
            return true;
        }
    }

    protected function cal($strFormID, $strControlID, $strParameter){
         switch($this->lstList->SelectedValue){
             case 'add': $this->lblLabel->Text = $this->txtBox1->Text +  $this->txtBox2->Text;
                 break;
             case 'sub': $this->lblLabel->Text = $this->txtBox1->Text -  $this->txtBox2->Text;
                 break;
             case 'mul': $this->lblLabel->Text = $this->txtBox1->Text *  $this->txtBox2->Text;
                 break;
             case 'div': $this->lblLabel->Text = $this->txtBox1->Text /  $this->txtBox2->Text;
                 break;
           }
    }
}
Calculator3::Run('Calculator3');
?>

You will probably understand more if you dive in to QCubed, but possibly you have noticed how I defined the form components (button, labels, listbox). Form_Create is called when the page is called the first time, and Form_Load is called in subsequent times. As I have set the CausesValidation property of button to true, so the Form_Validate function will be called every time it is clicked. That’s how you do form validation in QCubed, OOPS style and simpler, event driven. If the validation succeeds, the cal function will be called which does the real action.

Now this example causes the data sent back to the server and the page to reload before the calculation is carried. Now, if you would just like to page to remain as it is, and want the calculation to be done without page reloading(i.e. AJAX way), all you need to do is change:

$this->btnButton->AddAction(new QClickEvent(), new QServerAction('cal'));

$this->btnButton->AddAction(new QClickEvent(), new QAjaxAction('cal'));

Thats it! Every thing remains the same.

I am not a much experienced PHP developer. But this feature of QCubed really sold me. And there are hell lot of things you can do with AJAX and JQuery by just calling QCubed functions – Animations, drag and drop, Timers, Spinners.. the list is endless. I dont know how other PHP framework like Symphony, Zend etc handle AJAX, but this can save a lot of time. I can now imagine myself creating countless interactive cool apps without reading those big books of Ajax, JQuery and JavaScrpt I have in my hard drive.

My advice – give QCubed a try. And if you never have worked with any PHP framework before, then definitely give it a try. Maybe its not that popular, but probably worth a learn.

Image Courtesy – http://www.webhostdesignpost.com

—Saurav Modak

Each post takes two days or more of research and three hours of typing to bring out the high quality you see here. If you admire our efforts, consider Liking Us in Facebook. Subscribe to our RSS Feeds, to get alerts of new posts. You can also Follow Me on Twitter