Category Archives: Tech.

WordPress Widget: Client-side RSS util, The Web Klip Released!

The original WordPress (2.7+) provides RSS clip widget from the other website. It looks good but it is server-side script that may occupy the server resource to interpret the RSS. I don’t like that approach. So I decide to create a client-side script that loads rss from other website or blog.

If you want to try, just download the widget on http://www.koumei.net/download/wp-webKlip.zip , then unzip to wp-content/plug-ins/ folder, and activate the plugin and add widget to you wordpress blog.

Before using this widget, there are some notes you should know:

  1. Defects:
    Currently only support ONE RSS excerpt.
    Only shows the first RSS item.
    jQuery should be included on your blog.
  2. Usability:
    Site that provide at least 1 item RSS feed could be refered by this widget.
  3. Extension:
    Multiple-RSS and rollover will be available  on next release.

The Demo:

webklip_1
Picture 1. The plugin will be shown after you copy the unzipped file to your plugin folder
webklip_2
Picture 2. Add the widget to the “Widgets” menu on your administration panel. You can add a RSS feed to this widget

You can  find the demo on the right side of my blog.

:-)

A Simple Rss2Json Service Released!

Now I simply add a Rss2Json service on my blog, it just return the very first post from the target website as JSON and, of course, the target should be RSS format. The reason why I create this interface is because I would like to utilize cool AJAX to obtain the content from my friend’s blog, yet the browser secure prevent me crossing the boundary to other domain. Could it be working using iFrame? Negative. The only approach to cross the border is using JSON.

The definition of my interface is:

Name: Rss2JSon
Interface: http://www.koumei.net/rss2json/
Method: GET
Parameter 1:  rss  – The URL of the rss content
Parameter 2: cb — The javascript callback function
Return: application/x-javascript
Example: http://www.koumei.net/rss2json/?rss=http://www.blogjava.net/max/rss&cb=<callback>  (A blog of my friend)

The callback function is very significant. Don’t forget to define a callback JS function on your script. The definition of the callback function should be similar as below ( parameter rss is an object, containing “title”, “link” and “description” and so forth<please go through RSS schema on item tag>.)

<script type=”text/javascript”> 

function myCallback(rss){
    var title = rss["title"];   // or rss.title
    var link = rss["link"];  // or rss.link
    var desc = rss["description"];  // or rss.description.
}

</script>

Now, you can embed the script to wherever you need.
<script type=”text/javascript” src=”http://www.koumei.net/rss2json/?rss=http://www.blogjava.net/max/rss&cb=myCallback”></script> 

Enjoy scripting.

An idea for “Add to Favorite” function for virtuemart

The original Virtuemart provides RSS feed to every product, so that users can “eat” the feed if they like the product. The idea is cool, but actually, I prefer an on-line favorite subscribe function for the user than RSS subscribe. The RSS subscription is good to track back to a single category or a whole website, not so good to track each product. How many chance you would like to change the product’s description or product’s price to let the users know the newest status of product? So your product categories and website will be renew every now and then, even everyday, but not a single product, right? So the single product is good to be traced on the website’s favorite function. Unfortunately, Virtuemart doesn’t come with such a function for people to trace their own favorite product. The favorite products mean the products are probationary, users don’t buy them, but could buy them later. So what I think the “Add to Favorite” function could be specified as:

  1. It’s managable. User could easily add product to favorite list just a single click, better not refresh the page after they click a button.
  2. User can review the favorite list. 
  3. The product in the favorite list will be shown when the product is published.

I think this little gadget could help user shopping with happiness.

Howto: Create “Cash on Delivery” payment Varied from Different Postcodes for Virtuemart

Actually Virtuemart has done a great job on cash on delivery support, but what if cash on delivery cost a fee not only the total amount of purchase but also the different postcode? Here comes a tutorial on how to calculate the different rates based on users’ postcode.

Of course, before doing that, you need to have a workable Virtuemart distribution on joomla. You can find more tutorials on joomla official website or virtuemart website.

There are only two steps of this simple tutorial:

  1. Create a new payment method on Cash on Delivery. Actually the orignal virtuemart comes with an option of “COD”, but at this time I don’t want to ruin its file structure. I prefer to create a new one. Actually creating new payment method helps you to know more about joomla.
  2. Revise “ps_checkout.php” to make it works.

Let’s dive to details.

Create a new payment method on Cash on Delivery.

Sooner or later will you find that creating payment method couldn’t be easier. What you need to do is to create a class, and of course, you write some methods which is recoginzed by joomla framework. You can find bunch of original payment classes on /administrator/components/com_virtuemart/classes/payment/ folder. If you see carefully, you can see each payment class comes with a config file. For instance, you can see a payment class called ps_paypal.php, should come with a config named ps_paypal.cfg.php. I won’t use config file, so I don’t need the cfg.php file. Now here’s my turn on creating such a class:  create a file name “ps_codonpc.php” (which means “Cash On Delivery On PostCodes”), never mind its name, but I think you better follow the naming convention of Virtuemart. Open this file with any kind of text-editor, I recommend to use notepad++. Create a skeleton below.

if( !defined( '_VALID_MOS' ) &amp;&amp; !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' );
 
class ps_codonpc{
 
var $classname = "ps_codonpc";
var $payment_code = "PU";
 
function show_configuration() {
return false;
}  
 
function has_configuration() {
return false;
}
 
function get_payment_rate($sum, $ship_to_info_id=null) {
}  
 
function configfile_writeable() {
return true;
}
 
function configfile_readable() {
return true;
}
 
function write_configuration( &amp;$d ) {
return true;
}
 
function process_payment($order_number, $order_total, &amp;$d) {
return true;
}
 
}

I know what you must be thinking.  You must be wondering if there is any necessity to create those functions within the class. Yes, you have to. That’s the weakness as well as fexibility of the characteristic  object-oriented of PHP. Well, it makes senses, because PHP is runtime dynamic language, not compile-time language. The payment classes on /payment folder are dynamically recognized by the framework, they use the same functions naming convention to make the polymorphism works.  I mean the ps_paypal.php and ps_paymate.php are of the same functions’ name, and created by the framework, however the framework doesn’t need to know the existance of payment classes and doesn’t know what they are doing. The framework only knows their functions’ name. Confused? Never mind.  Forget this paragraph. You can do the same thing on java using “reflection”.

You can see a function called “get_payment_rate” in this class. Well, not all the classes in /payment folder have this function. Why? That’s because virtuemart framework will only calculate the payment rate if the “get_payment_rate” function is defined. Actually, there is only one parameter is need: $sum, but since we need to calculate the fee by post code, I add an additional paramter(ship_to_info_id)  and give it a default value(null).

Now you need to fill the “get_payment_rate” logic to make it works. I add a simple logic to calculate the payment rate.

function get_payment_rate($sum, $ship_to_info_id=null) {
		//Get the ship_to_info_id if the parameter is null
		//Normally the item is passed from checkout module
		//We need to change ps_payment_method.php to pass the parameter to this object.
		if( empty( $ship_to_info_id )) {
 
		    $sdb = new ps_DB();
 
		    $sdb->setQuery( "SELECT user_info_id FROM #__{vm}_user_info WHERE user_id=".$auth['user_id']." AND address_type='BT'" );
 
		    $ship_to_info_id = $sdb->loadResult();
 
		}
 
		//Get the zip(post code) from user info table
 
if(!empty( $ship_to_info_id )){
 
			$sdb = new ps_DB();
 
			$qry = "SELECT `zip` FROM `#__{vm}_user_info` WHERE user_info_id='".$ship_to_info_id."'";
 
			$sdb->query($qry);
 
			$sdb->next_record();
 
			$postcode = $sdb->f('zip');
		}  
 
		if(!empty($postcode)){
			if($postcode >= '3000' && $postcode < '3050'){
				return 0;  //these areas are free
			}else if($postcode >= '3050' && $postcode < '3150'){
				return floatval( $GLOBALS['CURRENCY']->convert(-5));  //these areas cost $5
			}else{
				return floatval( $GLOBALS['CURRENCY']->convert(-10)); //the othes cost $10
			}
		}else{ //unknow post code, use default
			return floatval( $GLOBALS['CURRENCY']->convert(-10)); //the othes cost $10
		}
}

Can you see the return value? it’s negative, that’s because the get_payment_rate function return the payment discount (according to the definition of this function), the name should be changed to get_payment_discount. Otherwise would be a little bit confused. If you return a positive, the users will get a discount from this payment; a negative, the users will pay an extra fee.

OK. That’s fine.

Revise “ps_checkout.php” to make it works.

And now go to ps_checkout.php, and find a line 1673, change “return $_PAYMENT->get_payment_rate($subtotal);” to

$ship_to_info_id = $_REQUEST['ship_to_info_id'];
return $_PAYMENT->get_payment_rate($subtotal, $ship_to_info_id);
“.

Okey dokey, Now add the Cash On Delivery paymethod on your administration page, and then go through the check out process and find out more excitement. Of course, the logic provided here is very simple, you can judge the rate from a post code data table and apply new features.

Howto: Show your images using fla-img-sw

“fla-img-sw” is a flash movie clip that enables several images loading by passing the images’ URL to the flash parameter. “fla-img-sw” is annouced by myself, you can get the source code or get the package on http://code.google.com/p/fla-img-switch/ .

Using AJAX to improve the loading phrase of the website is considered to be a good pratice on presentation tier. Actually, Flash movie cilp can do the same thing as AJAX. Imagine there are several images are to be loaded in one page, it takes user’s time on loading the page. If you show a thumbnail in that page, then if users would like to see the detail of the image, they have to click on that image link, your website then pop-up a window to show the original size of the picture. It waste users’ time, according to Even Faster Web Sites (Steve Souders), Life is too short, we should write code faster then even (means saving your users’ life and time :-) 

But I am not here to talk about how to utilize AJAX to improve the website, but gonna show a tutorial on how to use my open source gadget to show images on your website. Before that, just take a look at the example of how the gadget work: (click to enlarge, please note that the demo below is a snapshot of the commercial usage, the open source version is somehow a little bit different from the commercial one, like I depict on the previous post.)
fla-img-switch 
You can see a thumbnail on the right side, and the main picture which is selected will display on the big left side.

It’s easy to use. Once you get the package, you will see a file call “ImgSwitch.html”, that is the demo file, double click this file and you can see a demo locally. If you feel enough for the demo and being inclined to use it, just open the “ImgSwitch.html” and you will see how it works.

Easy to proceed:

  1. Copy “ImgSwitch.swf” to a appropriate position which you can refer from your HTML
  2. Copy the code below to where you would like to show the images:
    <object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0″ width=”690″ height=”492″ id=”ImgSwitch” align=”middle”>
    <param name=”movie” value=”ImgSwitch.swf” />
    <param name=”quality” value=”high” />
    <param name=”bgcolor” value=”#c2b29a” />
    <param name=”FlashVars” value=”picurl=1.jpg;2.jpg;3.jpg;4.jpg;5.jpg&maxpic=5&modelNo=TestTing” />
    <embed src=”ImgSwitch.swf” quality=”high” bgcolor=”#352B68″ width=”690″ height=”492″ name=”ImgSwitch” align=”middle” allowScriptAccess=”sameDomain” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” FlashVars=”picurl=1.jpg;2.jpg;3.jpg;4.jpg;5.jpg&maxpic=5&modelNo=TestTing”/>
    </object>
  3. Change the parameters:
    A. Replace “picurl” paramter with your image url, note that if your images are from www, don’t forget to quote the images’ URL starting with “http://”. And the URL is separated by semi-colon(;).
    B. Replace “maxpic” parameter with the actual images quantity you would like to show. 
    C. Replace “modelNo” paramter with the title(name) of this group of images.

Done.

Howto: Import data from Excel to joomla table using Kimport v1.5.0

After proper installation of Kimport component for joomla 1.5.x, you can try to manage the data using this component.

There is something you need to do before uploading the excel file to the component. The most important step to do is mapping the data columns to the excel columns. For instance, you probably have a table like this:

example data table

You can read the data structure by typing “describe [your-table-name]” on the command line or GUI-based mysql admin tools. Then you may now construct your excel file. Create a Excel file in Office 2003 (note that Kimport currently recognizes Excel2003), the paradigm of the excel file should look like: (Click the picture to enlarge the picture below)

excel file with a proper paradigm

You can see that the first column of the Excel is reserved to further use,  then the first row have to be IDENTICAL with the columns’ name of your data table. The second row is the data type property of the column. For instance, product_sku should be string, so the data type is written “string”.

Okay, now you know that the excel’s paradigm is to map the data meta information of the actual data table. The yellow high-lined part of this excel means the reserved information. Please also note the “sheet name” below. The sheet name should be the EXACTLY same as the table’s name. After the excel file is prepared, you can proceed to upload the file to the component.

Two steps are need to perform upload:

  1. Select “Kimport” from the top menu “Components”. (click the image below to enlarge)
    step 1
  2. Select the Excel file from the local computer. Then click “Save” on the top-right of the page. (click the image below to enlarge)
    step 2
  3. If upload is succeed, you can see a information notification on the page. (click the image below to enlarge)
    step 3

Easy, huh? But Still need to keep in mind when you arrange the Excel data:

  • The first column of the excel file is reserved.
  • The first row without the first column is mapped to the columns’ name of the data table.
  • The second row without the first column is the data type of the column
  • The sheet name of the excel file should rename to the EXACT name of the data table.

Kimport v1.5.0 installation guide

Just like the other components, you need to install Kimport before using it.

Pre-requisition:

  • Have joomla 1.5.x installed.
  • Login to joomla adminitration page as Super Administrator role user.

Installation: (3 Steps)

  1. Select install/uninstall from the main menu. If you can’t see the sub-menu on top, please confirm if you have an Super Admin role privilege.
    install step 1step 1
  2. Select the com_kimport.zip on your local folder. Press “Upload File & Install” button.  
    step 2step 2
  3. After a short while (com_kimport is small size), you can see the successful post-screen.     
    Step 3step 3

Now you can see “Kimport” sub-menu on the “Components” menu on top.

Kimport v1.5.0 for joomla 1.5.x Released

If you have ever been a web master, you would probably know joomla project or even use it for managing your web contents. It is easy to use and deploy. The only thing to do before using joomla should you have Apache and Php 5+ installed on your own server or hosting server. For SEF convenience, better have mod_rewrite on Apache server.

During the mainteinance of the joomla website, I was getting tired for adding new articles and other contents, that is, you have click on the “Add” button, type all the contents(or copy them from your notepad) to the relevant page, then press “Save” or “Apply” so that the new article is post. Then if you have another article to post, you have to go back to ground-zero and repeat the steps. 5 articles in all in one time gonna kill me, how about you get 20 more to post in one time? So that is the original idea for me to design a joomla component called KIMPORT. That component save my time adding the new contents. KIMPORT now becomes an administrator-oriented utility for manipulating the data table. Before adding new contents, you just fill in a specific excel file (2003) in a certain paradigm and then upload the excel with the component, then you got your data filled in the data table. The setup and the instruction guides please refer to the new post of my blog.

The initial version of KIMPORT is 1.5.0, which means it’s native for joomla 1.5.x. Since joomla 1.5.x is GPLv3.0, the license for KIMPORT is GPLv3.0 as well.

kimport

You can download the project source code with any SVN client:

svn checkout http://kimport.googlecode.com/svn/trunk/ kimport-read-only

Or just only download the package for installation:

http://kimport.googlecode.com/files/com_kimport.zip

SEO tips

ecently I was assigned to optimize a website for search engine recognization.  Here are some points which I think should be important to optimization.

1. Not Keywords But Keyphrase

In some books and some readings,  they encourage optimizing keywords first. Actually, I think first to do is not to arrange “keyword” but keyphrase. There are tonnes of keywords which are ignored by search engine, what make you think google prefer your words? The different between keywords and keyphrase is that keyphrase is oganic group of several keywords, better group in meaningful phrase. For instance, “melbourne, cellphone, nokia” should be re-group to “melbourne nokia cellphone”. it is said that 3-4 words phrase is effective and thrift. You can have several keyphrases.

2. Don’t use image navigation nor javascript 

unfortunately, search engine is not eligible to read the contents from image even flash. If you insist using images as navigation menu, don’t forget to add “alternative” to the image tag.  I prefer UL and LI plus image listing type to represent navigation menu.

3. Wrap product name or article name in H1 (H2, H3…)

That’s also a way to increase readable by search engine.  Also don’t forget to mention more keywords as possible inside the HTML BODY section.

4. Use meaningful URL

Thanks to many SEF utilities. They provides URL-rewrite capablity for web server. Those techniques can easily turn your URL “http://xxx?id=yyy&title=zzz” to “http://xxx/title-zzz_id-yyy” in a breath. Actually web server like Apache provides url-rewrite module that you can add the rewrite rules to the website by yourself.

5. Re-consider where and how AJAX is performed

AJAX is a great method to improve user’s experience of your website. But it comes with some short-comings. If you render your web contents all by AJAX, search engine will stop indexing your page. Like I said on the point 2, search engine will not be smart enough to execute your javascript.  So I think AJAX will be good when you:

  • Proceeding user’s feedback on the page (such as  post comments and re-render the comments).  
  • Add to shopping cart behavior. 
  • Performing some post data validations, such as checking availability of user name on register page.
  • Interacting with user on management pages, for instance, user information or user account management page. Since those pages should not be crawled by web-spiders. You can use javascript arbitrarily. But still keep in mind that NEVER force the page to be javascript support ONLY, i mean don’t force user to see the page only if javascript is enable.