Simple Feedback Form with Agile Toolkit

My company produces around 10-20 web projects per year for small companies and web entrepreneurs. Our clients, often business-oriented, are busy chasing investors and winning awards, while we are looking after their Web Software. However interacting with them is very important and we are looking for a better ways to do so.

Since we are developing web-software, why not use that web-software to interact with the client? In this article I am explaining how to go through a steps to develop a simple yet robust feedback system.

What will you need?

All the web software we are developing is based on Agile Toolkit. It is a platform which makes building of Web UI much easier and more consistent, while also looking at business logic structure in a very modern object-oriented fashion (http://agiletoolkit.org/).

You will also need to have a on-going project with a couple of pages. For my testing page, I have chosen a sign-up form for our up-coming project.

Adding a button

I wanted to have a minimum impact on the page layout / design, therefore I decided to add a button on the page which would open the frame.

$p->add('Button')->setLabel('Feedback for this page')
    ->
js('click')->univ()->dialogURL('Feedback',$this->api->getDestinationURL(null,
        array(
'discuss'=>true)),array('buttons'=>false,'width'=>'500x'));

This code creates button and binds click event on it. Whenever clicked it will open jQuery UI dialog with the same page it’s placed on, however with additional get argument:
"?discuss=true"

Creating a Model

In development branch of Agile Toolkit it’s no longer mandatory to create Controllers for each Model. Therefore I have only created a model.

Model represent a logical record in the database, describes it’s relations, fields, conditions, validations as well as possible actions. In my case I have created 4 fields in the model:

class Model_Feedback extends Model_Table {
    public 
$entity_code='feedback';
    public 
$table_alias='fb';

    function 
init(){
        
parent::init();
        
$this->addField('name')->caption('Your Name');
        
$this->addField('page')->system(true);
        
$this->addField('descr')->caption('Suggestion or Feedback')->datatype('text');
        
$this->addField('date')->system(true)->defaultValue(date('Y-m-d'));
    }
}

Reference will be the way how I tie certain feedback to my pages and date will be captured and saved without user having to enter it. Next I went to add the form into the new pop-up.

Frame for collecting feedback

Function univ().dialogURL(title,url) in Agile Toolkit creates a jQuery UI dialog with specified title and loads specified URL in the frame. URL is automatically appended with the “cut_page”, which will make sure that standard header/footer of my page is not showing up on the frame. The sub-request is executed with argument ?discuss=true therefore I need to intercept that and add a feedback form instead.

if($_GET['discuss']){
    
$p=$p->add('View','feedback');$_GET['cut_object']=$p->name;
    
$this->api->stickyGET('discuss');
    
$f=$p->add('MVCForm');
    
$f->setModel('Feedback')->setMasterField('page',$this->api->page);
    if(
$f->isSubmitted()){
        
$f->update();
        
$f->js()->univ()->successMessage('Thank you')->closeDialog()->execute();
    }
    return;
}

I have inserted this code right before the code which adds button. Additionally I created a View which I automatically force being cut form the page. This approach is a little messy, however it works quite well. Next I need to create table in SQL:

create table feedback (
	id int auto_increment not null primary key, 
	name varchar(255), page varchar(255), 
	descr text, date varchar(255) ); 

This worked perfectly. Clicking buttong brings a neat frame up for entering feedback. Result is saved into the database.

The best part is that the code is easily portable into any software which is using Agile Toolkit. For example I have also added the same code into THIS page. Due to a different theme it has a different look then on the screenshots, however the behaviour is identical.

Enjoy and if you like it, copy the code to your own Agile Toolkit application.

What is Agile Toolkit?

Result

 

Code

$this->api->dbConnect();
if(
$_GET['discuss']){
    
$p=$p->add('View','feedback');
    
$_GET['cut_object']=$p->name;
    
$this->api->stickyGET('discuss');
    
$f=$p->add('MVCForm');
    
$f->setModel('Feedback')
        ->
setMasterField('page',$this->api->page);
    if(
$f->isSubmitted()){
        
$f->update();
        
$f->js()->univ()
            ->
successMessage('Thank you')
            ->
closeDialog()->execute();
    }
    return;
}
$p->add('Button')
    ->
setLabel('Feedback for this page')
    ->
js('click')->univ()->dialogURL('Feedback',
        
$this->api->getDestinationURL(null,
       array(
'discuss'=>true)),
        array(
'buttons'=>false,'width'=>'500px'));