Thursday, April 22, 2010

Create an Adsense widget in 5 minutes

So now that we have seen some basic text output with Pyrocms Widgets, now we are going to explore user input/output with our second Widget. What Pyrocms lacks is a good Ad-sense widget, so that we can make some money out of our blog. So without wasting anymore time, we are going to create one.

If you are not interested with the inner workings, then you can proceed to  download the widget.

Before we start coding let us plan how our widget will work. After installing our widget, the user will be presented with a text area where he will input his adsense script. When he will click save, that adsense script will be stored within Pyrocms and output whenever requested.

So to begin, inside our Widget folder, we create a folder and call it adsense. Inside adsense, we create adsense.php file. Here is the content of our adsense.php file:

<----------CODE STARTS HERE---------->
 
public $fields = array(
   array(
  ' field' => 'js',
  ' label' => 'Adsense',
  ' rules' => 'required'
   )
 );
 

<----------CODE ENDS HERE---------->

Note that we have omitted the widget $title, $description, $author, $website and $version variables to make the code look more redeable. If you want to take a look at them, look at my previous blog on how to create a widget in 5minutes. So in the above, we are setting the necessary validation checks on our Form. When the user is presented with the text area, if nothing is input, a message will appear, telling the user that the field js with label “Adsense” is required.  

Notice that we are introduced to the $fields api for the first time here. Basically, $fields just tell Pyrocms the number of fields the widget will present to the user and if any form of validation must be performed on them.
Second, we need to process the input of the user:

<----------CODE STARTS HERE---------->
 
public function run($options)
{
   if(empty($options['js']))
   {
     return array('output' => '');
   }

//store the adsense js script
return array('output' => "");
}
<----------CODE ENDS HERE---------->
 
Next, we are introduced to the run() function. We will see this function many times during our development. Basically, the run()  function will do the core processing of our widget and output any result as necessary. The problem that I had with the adsense widget is that Pyrocms does not allow any script tags in its code. So after consulting with Philsturgeon, we decided to hard code our script tags inside our run() function. The most important part is the return array where we are telling Pyrocms to store our adsense script inside its code, here known as output.  

Next we create our views folder and inside it, we create two new files: display.php and form.php. Display.php will only contain < ? ph p echo $output; ?> , telling Pyrocms to print the data it has stored for us. Inside our form.php, we insert the following code:

 <----------CODE STARTS HERE---------->

< ? ph p echo form_textarea(array('name'=>'js', 'value' => $options['js'])); ? >
 

 <----------CODE ENDS HERE---------->

 
This is just the form that the user will be presented with when he has installed our widget. Most of the elements are self descriptive. Notice that I have asked the user to paste only specific parts of their adsense code. Then we see the text area that will take user input and send it to our run function. Notice here that $options['js'] is the field that will store our js code.

OK two things, most of what you are seeing here is UNDOCUMENTED. There is really no written documentation of how the widgets system works in Pyrocms and no one has been helping me with it. So, I had to break open the other widgets, analyze and make my own conclusions. Even I do not understand most of these codes. So with these, I encourage you to explore more and discover by yourself.



2 comments:

  1. Hi there, thanks for sharing and coming up with this little tutorial. But, what's the difference btw widgets and modules in pyrocms?

    ReplyDelete
  2. difference between widget and module is that, widget is a small program to do little things. module is a bigger thing. You should also read how to create module in pyrocms here

    http://our-knowledge-base.blogspot.com/2012/04/pyrocms-creating-hello-world-module-in.html

    ReplyDelete