Plugin: Sexy Comments v1.4 Released!

August 3, 2007 | 198 Comments

Contents:

  1. Introduction
  2. Feature List
  3. Installation & Upgrading
  4. FAQs

Introduction

This has been a long time coming and I am happy to announce the release of Sexy Comments v1.4! With this version comes a lot of changes...so be sure to read the installation section! Along with simple optimizations and general restructure, the following features are now available:

Feature List

  • Ajax comment preview (new feature)
  • Author post highlighting
  • Avatars
    • Either display/hide avatars
    • Select your avatar service of choice (Gravatar and MyBlogLog options are available)
    • Specify maximum avatar dimension (Gravatar Only)
    • Customize default/trackback avatars
  • Comment Reply-To (new feature)
  • Comment Themes (new feature)
  • CSS overriding
  • "Number of Comments" message customization
  • jQuery inclusion toggling

Installation & Upgrading

  1. Download Sexy Comments v1.4 from the WordPress plugin directory
  2. Unzip that little sucker
  3. Place sexy-comments folder in your wp-content/plugins directory (it should look like this: wp-content/plugins/sexy-comments/
  4. Log in to your WordPress plugin admin page and activate the plugin.
  5. In the plugin admin page, click the SexyComments sub-menu.
  6. Customize the settings until you have something that works for you.
  7. Locate your theme's template file that displays comments (typically comments.php). Remove the comment output loop and replace with:
    PLAIN TEXT
    PHP:
    1. <?php sexycomments::show($comments); ?>

  8. If you plan to use the Ajax features or the Reply-To features, you will need to do two things.
    1. Enable jQuery and jQuery Form Extension via the Plugin > SexyComments administration page.
    2. Locate the template file that contains the comment submission form (typically comments.php near the bottom) and replace that chunk of code with:
      PLAIN TEXT
      PHP:
      1. <?php sexycomments::form(); ?>

    NOTE: Be sure not to touch the section that generates the form for adding comments! This plugin does not re-create the comment creation form.

  9. Lastly, consider disabling the plugin CSS and taking the example CSS provided and customize it to suit your theme's color scheme.
  10. You should be all set, now! w00t w00t! Go make a MyBlogLog or Gravatar account if you don't already have one and upload an avatar. Gravatar tends to be pretty flakey so I'd suggest using MyBlogLog.

FAQs

  • Q: What is this "comment loop" you speak of?

    A: Ah, yes. That thing. Well, its anatomy looks similar to this (there will be some variation from theme to theme):

    PLAIN TEXT
    PHP:
    1. <?php if ($comments) : ?>
    2.     <!-- some HTML is typically here -->
    3.  
    4.     <?php foreach ($comments as $comment) : ?>
    5.         <!-- the output HTML of each individual comment -->
    6.  
    7.     <?php endforeach; /* end for each comment */ ?>
    8.     <!--...more HTML -->
    9.  <?php else : // this is displayed if there are no comments so far ?>
    10.     <?php if ('open' == $post->comment_status) : ?>
    11.         <!-- typically a blank area or a place with a comment -->
    12.      <?php else : // comments are closed ?>
    13.         <!-- closed comments section -->
    14.     <?php endif; ?>
    15. <?php endif; ?>

  • Q: Ok...so I just upgraded to a new version and there is nothing in the SexyComments admin page...WTF?

    A: Yeah. Sorry about that. In this version, the directory structure has changed drastically and Sexy Comments should no longer live in wp-content/plugins/sexycomments.php OR wp-content/plugins/sexycomments/sexycomments.php, but instead it should be in wp-content/plugins/sexy-comments/. Make sure that the plugin is in the correct location of your plugins directory.

  • Q: What happened to sexycomments_print($comments)? I used to use that to get my comments to display...will it still work?

    A: Along with a directory structure overhaul, this version had a large code overhaul as well. The old function (sexycomments_print) is deprecated but will still work for the time being. I greatly urge you to move over to the new function call sexycomments::show($comments) as that is the new *impoved* function.

Posted by Matt | Filed Under Blog, Technology 

Firefox Search Plugin for PHP.net

November 3, 2006 | Leave a Comment

php Dan, one of my co-workers, has been tooling around with PHP and easily plopped a PHP search extension into Internet Explorer 7. Well. I don't like IE7 as much as Firefox and sadly there's no super easy way to add a search plugin (if it doesn't exist or you can't find one...like in my case) without coding up the XML.

So, using Mozilla's instructions I whipped up a PHP.net search plugin. Here it is to anyone interested:

PLAIN TEXT
XML:
  1. <opensearchdescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">
  2.     <shortname>PHP</shortname>
  3.     <description>PHP.net</description>
  4.     <inputencoding>UTF-8</inputencoding>
  5.     <image width="16" height="16">data:image/jpeg,%FF%D8%FF%E0%00%10JFIF%00%01%02%01%00H%00H%00%00%FF%E1%03%CCExif%00%00MM%00*%00%00%00%08%00%07%01%12%00%03%00%00%00%01%00%01%00%00%01%1A%00%05%00%00%00%01%00%00%00b%01%1B%00%05%00%00%00%01%00%00%00j%01(%00%03%00%00%00%01%00%02%00%00%011%00%02%00%00%00%14%00%00%00r%012%00%02%00%00%00%14%00%00%00%86%87i%00%04%00%00%00%01%00%00%00%9C%00%00%00%C8%00%00%00H%00%00%00%01%00%00%00H%00%00%00%01Adobe%20Photoshop%207.0%002006%3A11%3A03%2015%3A18%3A39%00%00%00%00%03%A0%01%00%03%00%00%00%01%FF%FF%00%00%A0%02%00%04%00%00%00%01%00%00%00%10%A0%03%00%04%00%00%00%01%00%00%00%10%00%00%00%00%00%00%00%06%01%03%00%03%00%00%00%01%00%06%00%00%01%1A%00%05%00%00%00%01%00%00%01%16%01%1B%00%05%00%00%00%01%00%00%01%1E%01(%00%03%00%00%00%01%00%02%00%00%02%01%00%04%00%00%00%01%00%00%01%26%02%02%00%04%00%00%00%01%00%00%02%9E%00%00%00%00%00%00%00H%00%00%00%01%00%00%00H%00%00%00%01%FF%D8%FF%E0%00%10JFIF%00%01%02%01%00H%00H%00%00%FF%ED%00%0CAdobe_CM%00%02%FF%EE%00%0EAdobe%00d%80%00%00%00%01%FF%DB%00%84%00%0C%08%08%08%09%08%0C%09%09%0C%11%0B%0A%0B%11%15%0F%0C%0C%0F%15%18%13%13%15%13%13%18%11%0C%0C%0C%0C%0C%0C%11%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%01%0D%0B%0B%0D%0E%0D%10%0E%0E%10%14%0E%0E%0E%14%14%0E%0E%0E%0E%14%11%0C%0C%0C%0C%0C%11%11%0C%0C%0C%0C%0C%0C%11%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%FF%C0%00%11%08%00%10%00%10%03%01%22%00%02%11%01%03%11%01%FF%DD%00%04%00%01%FF%C4%01%3F%00%00%01%05%01%01%01%01%01%01%00%00%00%00%00%00%00%03%00%01%02%04%05%06%07%08%09%0A%0B%01%00%01%05%01%01%01%01%01%01%00%00%00%00%00%00%00%01%00%02%03%04%05%06%07%08%09%0A%0B%10%00%01%04%01%03%02%04%02%05%07%06%08%05%03%0C3%01%00%02%11%03%04!%121%05AQa%13%22q%812%06%14%91%A1%B1B%23%24%15R%C1b34r%82%D1C%07%25%92S%F0%E1%F1cs5%16%A2%B2%83%26D%93TdE%C2%A3t6%17%D2U%E2e%F2%B3%84%C3%D3u%E3%F3F'%94%A4%85%B4%95%C4%D4%E4%F4%A5%B5%C5%D5%E5%F5Vfv%86%96%A6%B6%C6%D6%E6%F67GWgw%87%97%A7%B7%C7%D7%E7%F7%11%00%02%02%01%02%04%04%03%04%05%06%07%07%06%055%01%00%02%11%03!1%12%04AQaq%22%13%052%81%91%14%A1%B1B%23%C1R%D1%F03%24b%E1r%82%92CS%15cs4%F1%25%06%16%A2%B2%83%07%265%C2%D2D%93T%A3%17dEU6te%E2%F2%B3%84%C3%D3u%E3%F3F%94%A4%85%B4%95%C4%D4%E4%F4%A5%B5%C5%D5%E5%F5Vfv%86%96%A6%B6%C6%D6%E6%F6'7GWgw%87%97%A7%B7%C7%FF%DA%00%0C%03%01%00%02%11%03%11%00%3F%00N%EA%D8%D5%E4%D9%8Fk%2Cg%A6v%8BN%CD%8E!%D5Uf%DF%D2oo%A6%EC%8A%FF%00%9CbG%AB%E2%FD%AA%BCv%B2%C7%8B%1E%2B77a%60s%ADv%1D%7F%9F%BD%CD%B2%E6%FEcT%9F%D2%F0%DE2K%ABa%B3-%E1%F6%D8k%05%C5%AD%7Dv%FA%0F%9F%A7_%E8%B6%7F%DF%14q%FAF%16%3EO%DA%19%5B%09f%EF%B3%B7%D3kE%5B%9Fm%DF%A1%89%DB%FC%F7%A7%EDo%E6%2B%DF%AD%B4%3F%FF%D9%FF%ED%08%86Photoshop%203.0%008BIM%04%25%00%00%00%00%00%10%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%008BIM%03%ED%00%00%00%00%00%10%00H%00%00%00%01%00%01%00H%00%00%00%01%00%018BIM%04%26%00%00%00%00%00%0E%00%00%00%00%00%00%00%00%00%00%3F%80%00%008BIM%04%0D%00%00%00%00%00%04%00%00%00x8BIM%04%19%00%00%00%00%00%04%00%00%00%1E8BIM%03%F3%00%00%00%00%00%09%00%00%00%00%00%00%00%00%01%008BIM%04%0A%00%00%00%00%00%01%00%008BIM'%10%00%00%00%00%00%0A%00%01%00%00%00%00%00%00%00%018BIM%03%F5%00%00%00%00%00H%00%2Fff%00%01%00lff%00%06%00%00%00%00%00%01%00%2Fff%00%01%00%A1%99%9A%00%06%00%00%00%00%00%01%002%00%00%00%01%00Z%00%00%00%06%00%00%00%00%00%01%005%00%00%00%01%00-%00%00%00%06%00%00%00%00%00%018BIM%03%F8%00%00%00%00%00p%00%00%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%03%E8%00%00%00%00%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%03%E8%00%00%00%00%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%03%E8%00%00%00%00%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%03%E8%00%008BIM%04%00%00%00%00%00%00%02%00%018BIM%04%02%00%00%00%00%00%04%00%00%00%008BIM%04%08%00%00%00%00%00%10%00%00%00%01%00%00%02%40%00%00%02%40%00%00%00%008BIM%04%1E%00%00%00%00%00%04%00%00%00%008BIM%04%1A%00%00%00%00%03I%00%00%00%06%00%00%00%00%00%00%00%00%00%00%00%10%00%00%00%10%00%00%00%0A%00U%00n%00t%00i%00t%00l%00e%00d%00-%001%00%00%00%01%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%01%00%00%00%00%00%00%00%00%00%00%00%10%00%00%00%10%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%01%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%10%00%00%00%01%00%00%00%00%00%00null%00%00%00%02%00%00%00%06boundsObjc%00%00%00%01%00%00%00%00%00%00Rct1%00%00%00%04%00%00%00%00Top%20long%00%00%00%00%00%00%00%00Leftlong%00%00%00%00%00%00%00%00Btomlong%00%00%00%10%00%00%00%00Rghtlong%00%00%00%10%00%00%00%06slicesVlLs%00%00%00%01Objc%00%00%00%01%00%00%00%00%00%05slice%00%00%00%12%00%00%00%07sliceIDlong%00%00%00%00%00%00%00%07groupIDlong%00%00%00%00%00%00%00%06originenum%00%00%00%0CESliceOrigin%00%00%00%0DautoGenerated%00%00%00%00Typeenum%00%00%00%0AESliceType%00%00%00%00Img%20%00%00%00%06boundsObjc%00%00%00%01%00%00%00%00%00%00Rct1%00%00%00%04%00%00%00%00Top%20long%00%00%00%00%00%00%00%00Leftlong%00%00%00%00%00%00%00%00Btomlong%00%00%00%10%00%00%00%00Rghtlong%00%00%00%10%00%00%00%03urlTEXT%00%00%00%01%00%00%00%00%00%00nullTEXT%00%00%00%01%00%00%00%00%00%00MsgeTEXT%00%00%00%01%00%00%00%00%00%06altTagTEXT%00%00%00%01%00%00%00%00%00%0EcellTextIsHTMLbool%01%00%00%00%08cellTextTEXT%00%00%00%01%00%00%00%00%00%09horzAlignenum%00%00%00%0FESliceHorzAlign%00%00%00%07default%00%00%00%09vertAlignenum%00%00%00%0FESliceVertAlign%00%00%00%07default%00%00%00%0BbgColorTypeenum%00%00%00%11ESliceBGColorType%00%00%00%00None%00%00%00%09topOutsetlong%00%00%00%00%00%00%00%0AleftOutsetlong%00%00%00%00%00%00%00%0CbottomOutsetlong%00%00%00%00%00%00%00%0BrightOutsetlong%00%00%00%00%008BIM%04%11%00%00%00%00%00%01%01%008BIM%04%14%00%00%00%00%00%04%00%00%00%048BIM%04%0C%00%00%00%00%02%BA%00%00%00%01%00%00%00%10%00%00%00%10%00%00%000%00%00%03%00%00%00%02%9E%00%18%00%01%FF%D8%FF%E0%00%10JFIF%00%01%02%01%00H%00H%00%00%FF%ED%00%0CAdobe_CM%00%02%FF%EE%00%0EAdobe%00d%80%00%00%00%01%FF%DB%00%84%00%0C%08%08%08%09%08%0C%09%09%0C%11%0B%0A%0B%11%15%0F%0C%0C%0F%15%18%13%13%15%13%13%18%11%0C%0C%0C%0C%0C%0C%11%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%01%0D%0B%0B%0D%0E%0D%10%0E%0E%10%14%0E%0E%0E%14%14%0E%0E%0E%0E%14%11%0C%0C%0C%0C%0C%11%11%0C%0C%0C%0C%0C%0C%11%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%0C%FF%C0%00%11%08%00%10%00%10%03%01%22%00%02%11%01%03%11%01%FF%DD%00%04%00%01%FF%C4%01%3F%00%00%01%05%01%01%01%01%01%01%00%00%00%00%00%00%00%03%00%01%02%04%05%06%07%08%09%0A%0B%01%00%01%05%01%01%01%01%01%01%00%00%00%00%00%00%00%01%00%02%03%04%05%06%07%08%09%0A%0B%10%00%01%04%01%03%02%04%02%05%07%06%08%05%03%0C3%01%00%02%11%03%04!%121%05AQa%13%22q%812%06%14%91%A1%B1B%23%24%15R%C1b34r%82%D1C%07%25%92S%F0%E1%F1cs5%16%A2%B2%83%26D%93TdE%C2%A3t6%17%D2U%E2e%F2%B3%84%C3%D3u%E3%F3F'%94%A4%85%B4%95%C4%D4%E4%F4%A5%B5%C5%D5%E5%F5Vfv%86%96%A6%B6%C6%D6%E6%F67GWgw%87%97%A7%B7%C7%D7%E7%F7%11%00%02%02%01%02%04%04%03%04%05%06%07%07%06%055%01%00%02%11%03!1%12%04AQaq%22%13%052%81%91%14%A1%B1B%23%C1R%D1%F03%24b%E1r%82%92CS%15cs4%F1%25%06%16%A2%B2%83%07%265%C2%D2D%93T%A3%17dEU6te%E2%F2%B3%84%C3%D3u%E3%F3F%94%A4%85%B4%95%C4%D4%E4%F4%A5%B5%C5%D5%E5%F5Vfv%86%96%A6%B6%C6%D6%E6%F6'7GWgw%87%97%A7%B7%C7%FF%DA%00%0C%03%01%00%02%11%03%11%00%3F%00N%EA%D8%D5%E4%D9%8Fk%2Cg%A6v%8BN%CD%8E!%D5Uf%DF%D2oo%A6%EC%8A%FF%00%9CbG%AB%E2%FD%AA%BCv%B2%C7%8B%1E%2B77a%60s%ADv%1D%7F%9F%BD%CD%B2%E6%FEcT%9F%D2%F0%DE2K%ABa%B3-%E1%F6%D8k%05%C5%AD%7Dv%FA%0F%9F%A7_%E8%B6%7F%DF%14q%FAF%16%3EO%DA%19%5B%09f%EF%B3%B7%D3kE%5B%9Fm%DF%A1%89%DB%FC%F7%A7%EDo%E6%2B%DF%AD%B4%3F%FF%D98BIM%04!%00%00%00%00%00U%00%00%00%01%01%00%00%00%0F%00A%00d%00o%00b%00e%00%20%00P%00h%00o%00t%00o%00s%00h%00o%00p%00%00%00%13%00A%00d%00o%00b%00e%00%20%00P%00h%00o%00t%00o%00s%00h%00o%00p%00%20%007%00.%000%00%00%00%01%008BIM%04%06%00%00%00%00%00%07%00%08%01%01%00%01%01%00%FF%E1%12Hhttp%3A%2F%2Fns.adobe.com%2Fxap%2F1.0%2F%00%3C%3Fxpacket%20begin%3D'%EF%BB%BF'%20id%3D'W5M0MpCehiHzreSzNTczkc9d'%3F%3E%0A%3C%3Fadobe-xap-filters%20esc%3D%22CR%22%3F%3E%0A%3Cx%3Axapmeta%20xmlns%3Ax%3D'adobe%3Ans%3Ameta%2F'%20x%3Axaptk%3D'XMP%20toolkit%202.8.2-33%2C%20framework%201.5'%3E%0A%3Crdf%3ARDF%20xmlns%3Ardf%3D'http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23'%20xmlns%3AiX%3D'http%3A%2F%2Fns.adobe.com%2FiX%2F1.0%2F'%3E%0A%0A%20%3Crdf%3ADescription%20about%3D'uuid%3A662ee06d-6b78-11db-bb16-f420df7fe7bb'%0A%20%20xmlns%3AxapMM%3D'http%3A%2F%2Fns.adobe.com%2Fxap%2F1.0%2Fmm%2F'%3E%0A%20%20%3CxapMM%3ADocumentID%3Eadobe%3Adocid%3Aphotoshop%3Af2ecf595-6b77-11db-bb16-f420df7fe7bb%3C%2FxapMM%3ADocumentID%3E%0A%20%3C%2Frdf%3ADescription%3E%0A%0A%3C%2Frdf%3ARDF%3E%0A%3C%2Fx%3Axapmeta%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%3C%3Fxpacket%20end%3D'w'%3F%3E%FF%EE%00!Adobe%00d%40%00%00%00%01%03%00%10%03%02%03%06%00%00%00%00%00%00%00%00%00%00%00%00%FF%DB%00%84%00%01%01%01%01%01%01%01%01%01%01%01%01%01%01%01%01%01%01%01%01%01%01%01%01%01%01%01%01%01%01%01%01%01%01%01%01%01%01%01%01%01%01%01%02%02%02%02%02%02%02%02%02%02%02%03%03%03%03%03%03%03%03%03%03%01%01%01%01%01%01%01%01%01%01%01%02%02%01%02%02%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%03%FF%C2%00%11%08%00%10%00%10%03%01%11%00%02%11%01%03%11%01%FF%C4%00%8B%00%00%03%00%00%00%00%00%00%00%00%00%00%00%00%00%00%02%04%05%01%00%03%01%00%00%00%00%00%00%00%00%00%00%00%00%00%00%01%03%08%10%00%01%03%04%02%03%00%00%00%00%00%00%00%00%00%00%07%03%04%05%00%12%06%08%01%11%02%15%17%11%00%02%03%01%01%00%02%03%01%00%00%00%00%00%00%00%03%06%04%05%07%02%01%15%17%11%12%16%08%12%00%02%02%01%03%01%09%01%00%00%00%00%00%00%00%00%01%02%11%03%12%00!%04Q%201Aq%222%13%05%15%14%FF%DA%00%0C%03%01%01%02%11%03%11%00%00%00-_5%D1~%C4v%7F%FF%DA%00%08%01%02%00%01%05%00%5C%8A%DD%BB%EF%A44%F6%0B%E0%0DVJ%1B%00c%1B)%FF%DA%00%08%01%03%00%01%05%00%B6%AD%AB%AB%9F.%EB%FF%DA%00%08%01%01%00%01%05%00%93%DB%01%AE%3AH_nF%3C%93%26%B5%7C9%3E%86%03%A8%C1A%C1%23%FF%DA%00%08%01%02%02%06%3F%00%E7p%ED%FA%CB%00%A9%CA%ABd%B0%F8%D8%88%DDJ%C6%60%EE%00%D8%C1%3A%AB%89%F9%CEx%CDn%06%C5e%20M%A6%A512C0%1E%D9%80d%EB%EDIz%BF%B3%95%C8%0El)'%E3%CD%5C%D6D%FA%81%C7%CB_%A1%C8%14%DBZdjA%5C%0A%CBX%EE%0A%EF%1B%06%03%BB%C2zk%FF%DA%00%08%01%03%02%06%3F%00%EC%7F%FF%DA%00%08%01%01%01%06%3F%00t%CE%9A%D64e%C1%A7ZsP%17%A9aA%3Acd%B8%2FY%3A%03g%C3t%07%CFX%E9%84%A3g%B2T%CB1nk%EB%E3%C9%80)%5D%04%BE%94%5C%08%8A%99%BDJ%E3%FB%0Cfw%889%E1%B4zO%E0%25%A2P%B0%DF%EE%D7%BF%E7%24%C3L%FD%9E%C4%CBqH%E3%A6R%F2%10J%AC%813%D8%90%E5q%22W%02%E3%82~6%B2X*%A7%19%93zt%A2f%D0%1C%A6%E6%CB%96%F7%D7%8A%D4Z%1Ez%F6%3C%AE%FC%F3gy-%8D6lt%3F%8F7%06%928%A4%E6W%26%24%22%7B%1F%81w%F6E*%A2D%A9k%E5g%FA%92%94Yb%BA%F4%1CL%0D%3A%9E%9B%A6L%1Ey%D49%F60%A9%3A%04%7D%18u%23%F6%0C*%FF%00x%15X%E4%0F%D1%FAo%23%83%FF%D9</image>
  6.     <url type="text/html" method="post" template="http://php.net/search.php">
  7.         <param name="show" value="quickref"/>
  8.         <param name="pattern" value="{searchTerms}"/>
  9.     </url>
  10.     <moz :SearchForm>http://php.net/search.php</moz>
  11. </opensearchdescription>

If you're on a Windows XP box, save the XML as php.xml and plop it in:

PLAIN TEXT
CODE:
  1. c:/Documents and Settings/{user}/Application Data/Mozilla/Firefox/Profiles/{something}.default/searchplugins/

If you're on a Mac, place php.xml in:

PLAIN TEXT
CODE:
  1. /Users/{user}/Library/Application Support/Firefox/Profiles/{something}.default/searchplugins/

Posted by Matt | Filed Under Blog, Random News, Technology 

The Ajax Experience: Plan of Attack

October 20, 2006 | 3 Comments

The Ajax Experience is next Monday (although I arrive Sunday afternoon) through Wednesday and I've prepared my plan of attack:

Monday

10:00am-11:30am: Leveraging Ajax for Enterprise Application Development - Conrad Damon
12:30pm-1:15pm: Keynote: Towards a Service-Oriented Applications Stack - Matt Quinn
1:30pm-3:00pm: Simplify Ajax development with Apache XAP - Bob Buffone
3:30pm-5:00pm: Ruining the User Experience - Aaron Gustafson
5:15pm-6:45pm: Scriptaculous - Justin Gehtland
8:00pm-9:30pm: Expert Panel Discussion

Tuesday

8:30am-10:00am: Intro to Dojo - Alex Russell
10:30am-12:00pm: Yahoo! Experiences with Accessibility, DHTML, and Ajax in Rich (Dunno what Rich is...probably the start of "Rich Internet Applications" [RIA], probably) - Nate Koechley
1:00pm-1:45pm: Keynote: Ajax from AOL's Perspective - William Morris
2:00pm-3:30pm: RAD 2.0: Working with symfony (PHP) - Dustin Whittle
4:00pm-5:30pm: Markup & CSS for Developers: Empowering the Application Developer with Front End Magic - Molly Holzschlag
7:00pm-7:45pm: Keynote: The Once & Future Web - Chris Wilson
9:00pm-10:30pm: Expert Panel Discussion

Wednesday

9:30am-10:30am: Designing for Ajax - Bill Scott
11:00am-12:30pm: Dojo Cookbook - Dustin Machi

My schedule is subject to change based on buzz or sudden interest in other presentations. I look forward to seeing what they have to offer and will be blogging along the way!

Posted by Matt | Filed Under Blog, Technology 

Remote JavaScripting Example - Part I

September 22, 2006 | 5 Comments

Contents:

  1. The Tools
  2. Step 1: create your template
  3. Step 2: simple template output
  4. Step 3: add dynamic content
  5. Step 4: make the template work
  6. Step 5: prepare script for remoting
  7. Step 6: place your widget somewhere
  8. Optional Step 7: create a wrapper
  9. Conclusion
  10. Download

At Plymouth State we work in a multi-server environment and often wish to display dynamic content from one server in an Ajax-like fashion on another server's website. My co-worker, Zach Tirrell, and I have drummed up a solution that works to keep our layout and logic separate, while still serving our end users in a smooth, seamless, non-iFramed manner.

I'll walk through the creation of a simple search 'widget' that relies on dynamic data to populate a drop-down box.

The Tools

- PHP
- JavaScript
- XTemplate
- RemoteJSOutput: a simple script by Matthew Batchelder (me) and Zach Tirrell

Step 1: create your template

This widget is fairly simple and thus has a simple template. The template syntax is simply XTemplate syntax.

I'll name it widget.tpl and store it in a templates directory.

PLAIN TEXT
HTML:
  1. <!-- BEGIN: main -->
  2. <div id="sweet_borkweb_widget" style="background:#eee;border:1px solid #ccc;text-align:center;">
  3.   <div style="color:#000;">A Couple JavaScript Posts at BorkWeb</div>
  4.   <select id="borkweb_posts">
  5.     <option value=""></option>
  6.   <!-- BEGIN: post -->
  7.     <option value="{post.url}">{post.title}</option>
  8.   <!-- END: post -->
  9.   </select>
  10. </div>
  11. <!-- END: main -->

Step 2: simple template output

First we'll just spit out the template. Lets create a PHP file to do this. We'll call it widget.php

PLAIN TEXT
PHP:
  1. <?php
  2. include('includes/xtemplate.php');
  3. $xtpl = new XTemplate('templates/widget.tpl');
  4.  
  5. $xtpl->parse('main');
  6. $xtpl->out('main');
  7. ?>

Check out your widget so far. Its plain. Lets change that.

Step 3: add dynamic content

We want the drop down list to hold BorkWeb articles. We'll add that in now.

Note: this is where you would normally pull from a database, an RSS feed, or some other source. For simplicty, we'll be using a simple PHP array. Whoop-de-doo. Here it is:

PLAIN TEXT
PHP:
  1. <?php
  2. include('includes/xtemplate.php');
  3. $xtpl = new XTemplate('templates/widget.tpl');
  4.  
  5. //get list of articles
  6. $articles=array(
  7.   array('title'=>'Ajax, More Than A Buzz Word','url'=>'http://borkweb.com/story/ajax-more-than-a-buzz-word'),
  8.   array('title'=>'Ajax; Templating; and the Separation of Layout and Logic','url'=>'http://borkweb.com/story/ajax-templating-and-the-separation-of-layout-and-logic'),
  9.   array('title'=>'Deleting the Internet','url'=>'http://borkweb.com/story/deleting-the-internet'),
  10.   array('title'=>'Node Manipulation in the DOM','url'=>'http://borkweb.com/story/node-manipulation-in-the-dom'),
  11.   array('title'=>'Prototype Cheat Sheets','url'=>'http://borkweb.com/story/prototype-cheat-sheets'),
  12.   array('title'=>'Script.aculo.us Is My New Best Friend','url'=>'http://borkweb.com/story/scriptaculous-is-my-new-best-friend'),
  13.   array('title'=>'The Case For JSON: What Is It and Why Use It?','url'=>'http://borkweb.com/story/the-case-for-json-what-is-it-and-why-use-it')
  14. );
  15.  
  16. //loop over articles and place in template
  17. foreach($articles as $article)
  18. {
  19.   $xtpl->assign('post',$article);
  20.   $xtpl->parse('main.post');
  21. }//end foreach
  22.  
  23. $xtpl->parse('main');
  24. $xtpl->out('main');
  25. ?>

Check out your widget now. It has been populated with some data! w00t! Now to make it work, we return to our beloved widget.tpl template file.

Step 4: make the template work

We're going to add in some javascript. Lets make the dropdown list redirect the user to the selected article when the drop-down box changes.

I'm going to add this on our select box:

PLAIN TEXT
HTML:
  1. onchange="if(document.getElementById('borkweb_posts').value!='') document.location=document.getElementById('borkweb_posts').value;"

The template should now look like this:

PLAIN TEXT
HTML:
  1. <!-- BEGIN: main -->
  2. <div id="sweet_borkweb_widget" style="background:#eee;border:1px solid #ccc;text-align:center;">
  3.   <div style="color:#000;">A Couple JavaScript Posts at BorkWeb</div>
  4.   <select id="borkweb_posts" onchange="if(document.getElementById('borkweb_posts').value!='') document.location=document.getElementById('borkweb_posts').value;">
  5.     <option value=""></option>
  6.   <!-- BEGIN: post -->
  7.     <option value="{post.url}">{post.title}</option>
  8.   <!-- END: post -->
  9.   </select>
  10. </div>
  11. <!-- END: main -->

Step 5: prepare script for remoting

Now that our lovely widget is functioning, lets prepare it for inclusion in other locations. This is simple using RemoteJSOutput (a simple script written by Zach Tirrell and myself).

We'll include that PHP class and use it as follows:

PLAIN TEXT
PHP:
  1. <?php
  2. include('includes/RemoteJSOutput.class.php');
  3. $remoteOutput=new RemoteJSOutput();
  4.  
  5. //start output buffering via
  6. $remoteOutput->start();
  7.  
  8. include('includes/xtemplate.php');
  9. $xtpl = new XTemplate('templates/widget.tpl');
  10.  
  11. //get list of articles
  12. $articles=array(
  13.   array('title'=>'Ajax, More Than A Buzz Word','url'=>'http://borkweb.com/story/ajax-more-than-a-buzz-word'),
  14.   array('title'=>'Ajax; Templating; and the Separation of Layout and Logic','url'=>'http://borkweb.com/story/ajax-templating-and-the-separation-of-layout-and-logic'),
  15.   array('title'=>'Deleting the Internet','url'=>'http://borkweb.com/story/deleting-the-internet'),
  16.   array('title'=>'Node Manipulation in the DOM','url'=>'http://borkweb.com/story/node-manipulation-in-the-dom'),
  17.   array('title'=>'Prototype Cheat Sheets','url'=>'http://borkweb.com/story/prototype-cheat-sheets'),
  18.   array('title'=>'Script.aculo.us Is My New Best Friend','url'=>'http://borkweb.com/story/scriptaculous-is-my-new-best-friend'),
  19.   array('title'=>'The Case For JSON: What Is It and Why Use It?','url'=>'http://borkweb.com/story/the-case-for-json-what-is-it-and-why-use-it')
  20. );
  21.  
  22. //loop over articles and place in template
  23. foreach($articles as $article)
  24. {
  25.   $xtpl->assign('post',$article);
  26.   $xtpl->parse('main.post');
  27. }//end foreach
  28.  
  29. $xtpl->parse('main');
  30. $xtpl->out('main');
  31.  
  32. //spit out script encased in JS
  33. $remoteOutput->puke();
  34. ?>

Now check out your widget. Ugly, huh? Well, don't worry, thats the way its supposed to look for now.

Step 6: place your widget somewhere

Now that we have that beautiful chunk of code in operation, place it on a webpage somewhere.

Put this:

PLAIN TEXT
HTML:
  1. <script type="text/javascript" src="http://url.to/your/widget.php"></script>

on any page you wish to test your widget!

Optional Step 7: create a wrapper

If, like me, you aren't a fan of including RemoteJSOutput.class.php all over hell's half acre, you can create a wrapper. This not only allows you to minimize the code you have to repeatedly place everywhere, but it also keeps your widget.php script functional on its own!

Here's an example wrapper I'll call get_script.php which will display wrapper_widget.php (step 3's PHP file, renamed):

PLAIN TEXT
PHP:
  1. <?php
  2. include('includes/RemoteJSOutput.class.php');
  3. $remoteOutput=new RemoteJSOutput();
  4.  
  5. //start output buffering via
  6. $remoteOutput->start();
  7.  
  8. //create a list of allowable widgets/scripts/yadda yadda
  9. $allow=array('wrapper_widget');
  10.  
  11. //does the passed variable exist in the allowable widgets?
  12. if(in_array($_GET['script'],$allow))
  13. {
  14.   //include the wrapper
  15.   include($_GET['script'].'.php');
  16. }//end if
  17.  
  18. //spit out script encased in JS
  19. $remoteOutput->puke();
  20. ?>

So rather than using the script tag that Step 6 suggests, we'd use:

PLAIN TEXT
HTML:
  1. <script type="text/javascript" src="http://url.to/your/get_script.php?script=wrapper_widget"></script>

Conclusion

This method is simplistic and is simply touching on the topic of widgetization. I will be following up with dynamic user interactions in Part II, and finally discuss an open-standard widget library with xml definitions. Stay tuned :)

Download

Oh, and here's the code used in this tutorial all zipped up.

Posted by Matt | Filed Under Blog, Technology 

Learning What I Know

August 15, 2006 | Leave a Comment

I recently received an e-mail from one of my subscribers that asked a question. The answer may be useful to some so I'm placing it here.

The original question

It seems so interesting developing websites application these days, thanks to the web 2.0 phenomena. I can't call myself a web developer or anything near that, but I'm interested to learn these kind of [things].

[...]

Since you seem to be real world developer to me, I have a couple of questions to ask you. I've been messing around with XHTML, CSS, Javascript, PHP and MySQL [for] a couple of months now, and it frustrates me sometimes when I sort of forget things and [can]'t understand the flow of the design of what I'm trying to achieve. [..]

Based on your experience, do you do everything by your own, i mean there are the front end and the back end [things], do you do both?

Talking of object oriented programming (i guess that's what prototype, script.aculo.us and ajax are really about), which OOP did u learn first? I [learned] simple Java before but does that come into play for web development as well? I mean, does it help if i go into detail learning Java?

Any other useful advice? I would appreciate your comments. Thank you.

My Reply

Web 2.0 phenomenon...Yeah, its good to stay on top of things like that :)

Development. XHTML, CSS, Javascript, PHP and MySQL...I do it all, however, I did not learn them all at once...but over a series of years. I think the key concept is to really try and keep your logic from your design - keep the MySQL/PHP side of things separate from the XHTML/CSS side of things ( e.g. Ajax, Templating, and the Separation of Layout and Logic). Javascript is a bit of a wildcard and bridges between both the presentation and logic.

You can do the above with and without Object Oriented Programming...although OOP is the preferred method. My first OOP language was Java. Next I branched out to Object Oriented PHP, and finally (last year) I learned Object Oriented Javascript.

All you really need is the OO concept in your head before you branch out and if you've used Java, you should be good to go. So to answer your question: "Does it help if you go into detail learning Java." is this: It won't hurt, but isn't necessary to succeed in learning the above languages/tools. When using Object Orientation and switching languages, its all about learning the syntax and the gotchas associated with your chosen language.

The biggest chunks of advice I can give regarding your tools of choice are as follows:

XHTML/CSS

  • keep it simple
  • use ids/classes rather than inline styles

PHP

  • live on php.net
  • learn through irritation with your own code...mine goes through constant revisions and optimizations
    - pick up a templating engine to help keep your layout and logic separate. I use XTemplates. I'm thinking about looking into SmartyTemplates....use whatever you wish...but templates save TONS of time.

MySQL

  • know your data
  • know how to normalize your data
  • download open source applications and look at their database structure for a good idea of what their doing and go from there

Javascript

Posted by Matt | Filed Under Blog, Technology 

Writing Your Server-Side Ajax Handler

March 22, 2006 | 19 Comments

Contents:

  1. Set up your Functions
  2. The Eval Method - A Dynamic Handler
  3. The Variable Variable Method - A Dynamic Handler
  4. The Switch Method - A Basic Handler
  5. Make a Choice
  6. In Closing

In my recent post on 'Ajax; Templating; and the Separation of Layout and Logic,' I refer to an Ajax Handler that sits server side to handle Ajax calls. Some elaboration is in order.

As I have stated in the past, I'm a huge fan of Prototype AND I choose PHP as my language of choice...so my examples will be using both, but the idea is portable.

Set up your Functions

Before you create a handler, you need a set of functions that the handler can reference. Here's an example:

PLAIN TEXT
PHP:
  1. <?php
  2. function world($params='')
  3. {
  4.   return 'Goodbye Cruel World.';
  5. }//end world
  6.  
  7. function sweetWorldAction($params='')
  8. {
  9.   //we expect params to be an array or a string similar to a parameter string from a GET..i.e. "bork=asdf&cheese=yes please"
  10.   //parse out the variables
  11.   if(!is_array($params))
  12.   {
  13.     parse_str($params,$params);
  14.   }//end if
  15.  
  16.   //do your logic here
  17. }//end sweetWorldAction
  18. ?>

Now that we have the functions all set, we'll set up a handler that receives Ajax calls and calls the appropriate functions.

The Eval Method - A Dynamic Handler

This method is one that I toyed around with for a while and I'll admit that its pretty simple and clean but there are some drawbacks. We're going to make a few assumptions: All requests will be GET (this is to keep things simple for this example) and we will keep the complexity of .htaccess sweetness out of these examples and assume that each call will be passing a function variable that specifies the function we are calling. I'll get to those in a second...but first I'll show you the handler code in this Eval Method:

PLAIN TEXT
PHP:
  1. <?php
  2. //if the user leaves the page or closes the browser prematurely, this will help prevent half completed statements
  4.  
  5. include('functions.php');
  6.  
  7. //list out your Ajax accessible functions
  8. $valid_functions = array('world','sweetWorldAction');
  9.  
  10. if($_GET['function'] && in_array($_GET['function'],$valid_functions))
  11. {
  12.   //get the get parameters
  13.   $params = $_GET; 
  14.