Russell and Associates - Forum

Views

form.php and display.php

This is section 2 of the PyroCMS widget creation example.  As stated before, PCMS is built upon Codeigniter – a very powerful and easy to learn PHP Framework.  Codeigniter is MVC compliant.

You have updated the class file – affiliate.php.  In there, you defined the fields you will use in the admin interface to actually add the content for your affiliate link widget.

Download the affiliate.zip file here

Next, we edit the files contained in the ‘views’ sub-folder.  There will be two – ‘display.php’ and ‘form.php’.  They do exactly what they say they will do – display the content of the widget and create the form interface to add your content to the widget.

NOTE: I have kept the CSS and JavaScript in the files to ease the understanding of the PyroCMS widget creation.  This is not standard practice, but lets not add confusion to what may be a challenging topic by rigorously adhering to coding standards purity during the learning phase.

form.php

<?php

/**

* form.php for affiliate widget

* ==============================

* @author	Victor Russell - www.randaweb.com

*

* Create the form using Codeigniter form_helper and form_validation libraries

* form_input() and form_textarea() are used to display the content from the

* database.

*

**/

?>

<ol>

<li style='margin-top: -2em; margin-bottom:-1em;'>

<label>Affiliate Title (used for onhover - tooltips)</label>

<?php echo form_input(array('name'=>'aff_title', 'value' => $options['aff_title'] ) ); ?>

</li>

<li style='margin-top: -2em; margin-bottom:-1em;'>

<label>Row Break - 1 = new line/row</label>

<?php echo form_input(array('name'=>'aff_order', 'value' => $options['aff_order'],

'size' => '3', 'maxlength' => '3' ) ); ?>

</li>

<li style='margin-top: -2em; margin-bottom:-1em;'>

<label>Affiliate Link &lt;a&gt; *</label>

<?php echo form_textarea(array('name'=>'aff_link', 'value' => $options['aff_link'], 'rows' => '5' ) ); ?>

</li>

<li style='margin-top: -2em; margin-bottom:-1em;'>

<label>Affiliate Alt Text</label>

<?php echo form_input(array('name'=>'aff_alt', 'value' => $options['aff_alt'] ) ); ?>

</li>

<li style='margin-top: -2em;'>

<label>Affiliate CSS Class</label>

<?php echo form_input(array('name'=>'aff_class', 'value' => $options['aff_class'] ) ); ?>

</li>

<li style='margin-top: -2em;'>

<label>Affiliate CSS Style</label>

<?php echo form_textarea(array('name'=>'aff_style', 'value' => $options['aff_style'], 'rows' => '2' ) ); ?>

</li>

<li style='margin-top: -2em;'>

<label>Affiliate Source (CJ, ClickBank...) *</label>

<?php echo form_input(array('name'=>'aff_source', 'value' => $options['aff_source'] ) ); ?>

</li>

<li style='margin-top: -2em; margin-bottom:-1em;'>

<label>Affiliate Ad Company *</label>

<?php echo form_input(array('name'=>'aff_company', 'value' => $options['aff_company'] ) ); ?>

</li>

</ol>

<?php //echo js('codemirror/codemirror.js'); ?>

<?php /*<script type="text/javascript" defer="defer">

html_editor('html_editor', "25em");

</script> */ 

?>

The form.php is rather simple. The main hurdle you may have is the syntax used to create the form elements – this is Codeigniter’s style and is very powerful.  Once you really understand it, it is very simple.

Link to the very excellent Codeigniter documentation.  Click on the drop-down menu at the very top of the page and examine all of the classes, helpers, libraries, and other useful information.

Codeigniter form helper and form validation documentation

<label>Affiliate Source (CJ, ClickBank...) *</label>

<?php echo form_input(array('name'=>'aff_source', 'value' => $options['aff_source'] ) ); ?>

This code creates a form element label and the CI method of a input type=’text’ element.

The form_input() method creates the following (using ‘view generated source’ after rendering the page with an affiliate widget):

<input type="text" name="aff_title" value="">

The Codeigniter form validation class then checks the length of the fields, as well as other attributes (numeric, alphanumeric, integer, etc), against the array that you created in the ‘affiliate.php’ file.  If an error occurs, you will get a detailed error message near the top of the widget container telling you the field and error.  This occurs after you click ‘Save’.

For the PHP Codeigniter  form_textarea() method,

<?php echo form_textarea(array('name'=>'aff_style', 'value' => $options['aff_style'], 'rows' => '2' ) ); ?>

the resulting form element looks like this:

<textarea name="aff_link" cols="90" rows="5" value=""></textarea>

The one very important and simplification from standard form handling is the ‘value’ => $options['aff_style'] attribute. If there is content in the field, this array value is assigned as the value of the form element, displaying it for viewing and editing.

Widget Form Preview

Affiliate Links

Because of the issue regarding Javascript inclusion in text areas and input fields, use only HTML-formated affiliate links from your provider (ClickBank, Commission Junction, etc).  Do not add any features that some providers have as options – such as CJ’s ‘Hide tracking code in link?’ and ‘Encrypt link?’ options – don’t use them or your links won’t work as expected.

Future

I am working on an automated affiliate link manager for PyroCMS – this will be a ‘module’ and not a ‘widget’.  This will allow you to program your site to populate a link section or sections with specific categories using your link providers API.

Thanks,

Vic Russell

Russell and Associates

www.randaweb.com/forum

randaweb@gmail.com

PyroCMS is a very powerful and capable PHP-based CMS.  It is authored on top of the Codeigniter framework.  It is very fast, and scalable and very promising as a powerful PHP framework.

Download the affiliate.zip file here

Caveat: The documentation for PyroCMS (PCMS) is very sparse.  Any answer to any question can be exceedingly  difficult to find.  Check back often for additional links to developing documentation.

One of the new and useful features of PyroCMS is the addition of Widgets.  Now, we all know what a widget is, right?  Actually, in the PCMS world, the concept of widget is very accurate – it is a discrete entity (in this case, a class) that can be added to a page, section of a page (right sidebar, left sidebar, header, footer, content, etc) that can access the database as well as execute custom code and present content that you create, in a format you define. You can use this to display images, text, and any other content you decide is needed – EXCEPT for JavaScript.

Let me clarify the javascript problem: if you want to create a widget that allows you to enter javascript snippets, it will not work – the <script> tags as well as any document.write() methods are stripped out for security reasons and replaced with [removed].  I am searching for a workaround, but given the above statement regarding documentation, this might take some time.  [ note: The feature within the Codeigniter (CI) form_helper class that sanitizes strings is xss_clean and prep_for_form ]. Until then, I am adding the needed JavaScript in the class and view files.

There are adequate installation documentation and install examples on the web for installing PyroCMS and Codeigniter.  Here are a couple.

PyroCMS Installation

Installing Codeigniter (this is link is provided only for reference - you do not need to download and install CI as PyroCMS is built on top of CI)

It is critical that you define your database connection accurately, and remember your default user name and password.

Our Platform

I am using a Dell laptop with 2 GB of RAM and a dual core Athlon X2 processor (circa 2006) with WAMP (Windows Apache MySQL PHP) installed for development, PHP Designer 7 as the IDE (Eclipse is too heavy, but would work with a more powerful machine).  WAMP is a very easy install.

All of my web files are under C:\wamp\www\ - which is the default web root for a typical WAMP installation.

Lets create a widget in PyroCMS - 'affiliate'

There is no widget named affiliate that comes with your installation.  Therefore, any reference to a file or folder/directory implies you have added it or should add it.

Navigate to the widgets directory under the application directory

• (note: I am a Linux developer first - some of my paths will have the forward Unix-style slash ( / ) rather than the backwards Windows-style slash ( \ ).  Make adjustments where needed if I forget to use Windows style slashes)

C:\wamp\www\pyrocms_directory\application\widgets\affiliate

First, create the directory within the ...\widgets\ path called affiliate.

Widget Directory Structure

Copy the code from this link into a download folder, extract the files, then copy the the files into the above path.  You will copy the 'views' directory and the affiliate.php file into the affiliate directory (see folder screenshot).

Download the affiliate.zip file here

Within the 'views' directory, you will have two files:  display.php and form.php. These files, and the containing 'views' folder, will be  present in every PyroCMS widget you create - these files are required and necessary.

• The first file you edit (or create, depending on your need) is the class file.  Remember to capitalize the name of the class - which must be the same name as the file (less the .php extension ).

Here is a bare affiliate.php file after editing to add the fields needed for the new widget:

<?php

if(!defined('BASEPATH')) exit('No direct script access permitted');

class Affiliate extends Widgets

{

// This section will appear when you click on the widget on the 'widgets' page of the admin

// interface (aka dashboard).  You access the admin interface using the following URL:

// http://your-host/your-pyrocms-base-dir/admin

public $title = 'Affiliate Widget';

public $description = 'Add Affiliate Links and Images';

public $author = 'Vic Russell';

public $website = 'http://www.randaweb.com';

public $version = '0.3';

// Now you define the fields that you will use in your widget.

// The widgets class will contain a 'name' field, so it is optional here

public $fields = array(

array(

'field' => 'aff_title',

'label' => 'Product Title',

'rules' => 'trim|max_length[254]'

),

array(

'field' => 'aff_order',

'label' => 'Add Order - 1 = new line',

'rules' => 'trim|max_length[3]|integer'

),

array(

'field' => 'aff_link',

'label' => 'Affiliate Link',

'rules' => 'required|trim'

),

array(

'field' => 'aff_alt',

'label' => 'Affiliate Alt Text',

'rules' => 'trim|prep_url|max_length[254]'

),

array(

'field' => 'aff_class',

'label' => 'CSS Class',

'rules' => 'trim|max_length[254]'

),

array(

'field' => 'aff_style',

'label' => 'CSS Style',

'rules' => 'trim'

),

array(

'field' => 'aff_source',

'label' => 'Affiliate Source)',

'rules' => 'trim|max_length[254]'

),

array(

'field' => 'aff_company',

'label' => 'Company Source for add',

'rules' => 'trim|max_length[254]'

)

);

public function run($options)

{

// The requisite 'run()' method that returns the data in the $output[] array //

if(empty($options['aff_title']))

{

return array('output' => '');

}

return array('output' => array($options['aff_title'], $options['aff_link'],

$options['aff_alt'], $options['aff_class'], $options['aff_style'],

$options['aff_source'], $options['aff_company'] ) );

}

}

/* Close class Affiliate */

 Section 2 - form.php

 Section 3 - display.php

Back To Forum

Russell & Associates Website

Recently, I began using the 960grid and Blueprint CSS frameworks.

For fast page prototyping, these css libraries (i.e. grid frameworks) are very useful.  I did notice many issues when attempting to use more complex layouts – there is little room for any deviations, such as adding borders (Blueprint in particular)!

That is when I began adding float-fixes and other css classes to compensate for the issues inherent in these CSS frameworks.

This begged the question - did this truly save me time over a custom css framework based on the specific page layout?

Yes, I do believe it did save time.  The basic page structure can be created super-fast.   I didn’t have to worry about any heavy lifting just to get a container, subcontainers, and ribbon menus aligned and floated properly.  It was just a matter of adding a class definition for the element (<div id=’mydiv’ class=’span-6′>).

NOTE: I trashed the YUI layout grid trial – too much overhead for my taste.  That is not a critique, but I love jQuery and don’t want to integrate another JS lib for a basic grid system.  If I am incorrect in my assumption – and someone can point me in the direction of simplistic get-er-up-and-running-fast documentation (versus Yahoo!’s rather messy but comprehensive docs), I will invest an afternoon.

I will go into more detail as time permits, and I am going to try the YUI layout grid system.  Then I will do a comprehensive analysis of the features and drawbacks of each.

I will also cover how the following jQuery stacks integrate with each framework:

• jQuery UI
• jQuery plugins

Thanks,

Vic.

Here is a link to my dev server and the current dev projects I am involved with.

Finally have the CI site up and running on a hosted site:

www.randaweb.com

Here are links to our DEV server:

Page using the 960grid framework – many jQ features – check out each tab.

Page using the blueprint css framework – interesting MAC-like menu (hover over the solar system planets)

Another BP css page – sales page