Category Archives: Open Source

Some Must-have PHP+MySQL development tools and utilities

After being a web developer for so many years, I find that myself is still a big PHP fan. The reasons are quite obvious: first of all, it is lightweight, very easy to deploy to any server in the world, and it is free! There are also a lot of open source PHP frameworks such as CakePHP, Yii that we can use. As a PHP web developer, I want to share some tools here with my comments. Hope that they are useful.

1. WAMPServer (Apache/MySQL/PHP included)

Setup PHP+MySQL development environment in no time. It is not very hard to setup the development environment by yourself, however this tool is extremely helpful if you don’t want to spend your time to do the job that someone else has already done for you.

2. Framework: Bootstrap 3 (or 2.5)

Originally from Twitter team, it is now becoming famous for its responsive framework. I really like to use it because it really saves me time to write a lot of CSS.

3. Useful gadget: Firebug (plugin for firefox)

It is actually nothing to do with PHP, however, if you are developing a website, you don’t want to miss it.

4. Tortoise SVN for window / Tortoise Git for window

Version control. I like to use it because it is seamless embedded in window explorer.

5. Navicat lite

A lightweight MySQL client software. (No more free, please find it through google for the old version, trust me, old version is good as well)

6. NetBeans IDE

Open source PHP IDE. Other option: If you are developing open source project, you can also get a PHP Storm for free.

What else?

There are bunch of software/tools help to improve the productivity that can be found on Design Junction‘s Ultimate Free Toolkit for Internet Web Ninjas as well. Hundreds of tools are listed.

jCarousel Lite Mouse Hover Event Improvement

jCarousel Lite is a fantastic jQuery plug-in to display photo gallery. You can have a look at the demo at: http://www.gmarwaha.com/jquery/jcarousellite/#demo

On this demo, the photo gallery will only scroll left or right when you click on the left arrow and right arrow. On jCarousel’s document, we can initialize the carousel start scrolling when the page finishes loading by specify the option: auto

$(".slider").jCarouselLite({
visible: 4,
<strong>auto: true</strong>,
speed: 2000
});

What if I want it to stop when my mouse hover on any of the images? Oh, jCarousel does not originally handle mouse hover event. Well, DIY time.

Firstly, download the carousel original source code from the official website

open that file (jcarousellite_1.0.1.js)

Second, add a code block between line “function go(to){” (about line 292):

//&lt;!--add by koumei
var isMouseOver = false;
$(this).mouseover(function(){
isMouseOver = true;
}).mouseout(function(){
isMouseOver = false;
});
//add by koumei--&gt;
function go(to) {
...
...

Third, modify function go: (around line 293)

Change "if(!running)" to "if(!running &amp;&amp; !isMouseOver)"

Fourth, DONE.

Quite simple, I hope the author will consider this function to the next release. :-)

You can also download my modified version and the demo at:

http://koumei.net/download/carousel-demo.zip

koumei.net Weather Channel

Koumei.net Weather Channel is released today using koumei.net RSS 2 Json service. For now only have Melbourne, Adelaide and 3 cities in between. Just for my convenience :-)

If you want to make yours, just download the source code yourself: Source Code

The weather service makes use of weather RSS from Yahoo! weather channel. And change to client side RSS to Json converter in koumei.net (A Simple Rss2Json Service Released!: http://blog.koumei.net/2009/03/20/a-simple-rss2json-service-released/).  So make sure you have javascript supported browser either on the phone or pc.

And here it is: http://weather.koumei.net :-)

Gallery CMS MOD: View As HTML or Partial HTML

Gallery CMS  provides an easy-manage CMS (Content Management System) framework for gallery. I like the way they manage data, all the data are exposed as XML or JSON. It is not a complete solution of photo gallery online, but if you need to integrate photo gallery on your website that would be a very good start: you can easily develop or integrate. And guess what is the exciting part? It’s free! For more information, please feel free to download @ http://www.gallerycms.com/

It’s easily integrate but sometime you might need more convenience when integrate it to your website. Of course using XML or JSON which is the basic data structure is not that difficult, but I think most of time, for the integration itself, the most easiest and convenient is managing HTML. On the view if you are rendering the content partially, later you can use AJAX to replace the partial HTML content dynamically other than managing JSON on client side: we need rich client application, but if it lose weight a little bit, why don’t we make it lighter?

So, let us apply the MOD to it. It’s MIT license, so, no harm to mod it. Just pay a little attention to it’s license file: Gallery CMS comes with 2 licenses, one license is MIT license which represent itself, and the other license is derived from CodeIgniter which the basic framework.

1.\application\controllers\view.php //Add the following codes to it:

function html() {
$data['row'] = $this->gallery_xml->viewXML();
$this->load->model(‘settings_tbl’);
$data['settings'] = $this->settings_tbl->viewSettings();
$this->load->view(‘view_html’, $data);
}

2. On\application\views\ folder, create a file view_html.php

Please note that, you can make the view html a full html or you can partially render it like this:

<?php if(isset($row)) {?>
<div>
<?php foreach($row as $r){?>
<?php if(isset($r->images)) {
foreach($r->images as $img) { ?>
<div>
<div><a href=”<?php echo base_url();?>uploads/<?php echo $img->filename;?>” target=”_blank” title=”<?php echo $img->caption;?>”><img src=”<?php echo base_url();?>uploads/<?php echo $img->thumbnail;?>” border=”0″ align=”absmiddle” width=”<?php echo $settings[0]->thumb_width; ?>” height=”<?php echo $settings[0]->thumb_height; ?>”/></a></div>
<div><?php echo $r->title;?></div>
<div><?php echo $r->description;?></div>
</div>
<?php } ?>
<?php } //if  ?>
<?php } ?>
<div style=”clear:both”></div>
</div>
<?php }?>

After that, you can use: http://<GALLERY_CMS_WEBSITE>/index.php/html  to retrieve the HTML content. In our mod above, it is just partial HTML, so you can jQuery it:

$.get(‘http://<GALLERY_CMS_WEBSITE>/index.php/html ‘, null, new function(resp){$(‘#html-container’).html(resp);});

Nice and easy.

ASP.NET MVC Whole Site 301 Permanent Redirect

For some reasons, we need to permanently redirect the whole website to another website. It would be much easier that you are the owner of the server. But most of time you just host your website on the server out there. It wouldn’t be a big problem that your hosting company will support you to do some simple 301 redirect or may you have enough privilege to do it yourself. Is it possible to redirect permanently the website to other website by programming a little bit?

Sure you can. With MVC routing facilities, you can define your customized redirect logic: CREATE AN EMPTY MVC PROJECT, MODIFY GLOBAL.ASPX.CS FILE ONLY ON THIS EXAMPLE:

First of all, define two objects which implemented IRouteHandler and IHttpHandler, you can feel free to define those two objects on Global.aspx.cs file:

//@Implements IRouteHandler
class RedirectRouteHandler : IRouteHandler
{
private string newUrl;
public RedirectRouteHandler(string newUrl) { this.newUrl = newUrl; }
public IHttpHandler GetHttpHandler(RequestContext requestContext)
{
return new RedirectHandler(newUrl);
}
}

//@object implements IHttpHandler
class RedirectHandler : IHttpHandler
{
private string newUrl;

public RedirectHandler(string newUrl) { this.newUrl = newUrl; }

public bool IsReusable { get { return true; } }

public void ProcessRequest(HttpContext httpContext)
{
httpContext.Response.Status = “301 Moved Permanently”;
httpContext.Response.StatusCode = 301;
httpContext.Response.AppendHeader(“Location”, newUrl);
return;
}
}

Then add one line on RegisterRoutes(RouteCollection routes) method (in Global.aspx.cs):

routes.Add(new Route(“{*pathInfo}”, new RedirectRouteHandler(@”http://koumei.net”));

Now all request to the website will redirect to “koumei.net” permanently. :)

Partner of Joomla Development – Part 1 Firefox

Joomla has gained brilliant prestige in open source CMS development. There are heaps of 3rd-party modules and components in Joomla. For Joomla, I would rather say it is an application framework than open source CMS system.

In here, I would like to introduce some useful utilities for Joomla development. Actually the tools are also good for any website development.

Firefox

I don’t want to spend too much time introduce the open source website browser. There are at least 3 must-have plug-ins for Firefox:

1. Firebug

Good for Javascript debug, CSS preview and website structure analysis.

2. Fireshot

Sometimes we got a headache because you need to capture a screen shot of the website which is oversize in height. For a long time, I need to use window painter to join every single pieces of screenshot together to form a integrated website. With Fireshot, just fire it in one shot. Absolutely good tool.

3. Rainbow

This tool is quite useful if you need to get the color from the website (in hex decimal)

Just 3 tools? Hmm, for me, I think they are enough for the development. Of course you might need other tools to help you. In my opinion, not all tools are useful. But at least those 3 tools, especially Firebug could save you a lot of time if you need to deal with many HTML/CSS and javascript stuff.

My Webklip Plugin For WordPress: Goes Multiple-RSS!

Today I refactory the source code and add new features to Webklip, it becomes 1.2 and, most encouraging, multiple rss supports!

The improvement includes:

  • Uses template engine to show widget. No more embedded HTML.
  • Moves all functions to a util class
  • Supports up to 5 RSS
  • Still reads RSS feed dynamically on client-side

The feature version will be released next day or two, will enhance javascript flexibility. E.g., not compulsorily needs jQuery framework.

You can download the widget on http://www.koumei.net/download/wp-webKlip.zip

Relative article:

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

Virtuemart: Ajax Effect on IE 8 Fix List based on Virtuemart 1.1.3(stable release since 22, Jan)

Virtuemart utilizes Ajax mostly by mooTools. It works fine in many browsers except microsoft newly released browser IE 8. Especially when user try to add a product to shopping cart using Ajax, the mooPrompt (a pop-up window) fails, and nothing happen on that page… Maybe the first thing you are about to do is to upgrade mooTools. Yes, that’s seems a great idea, however mooTools’s updates from 1.11 to 1.21 is totally a nightmare for developer. Many things change, you have to revise the code manually for Virtuemart. 

The following files should be updated (if you want to satisfy IE 8 users):

  • \components\com_virtuemart\js\mootools\mootools-release-1.11.js  (update to 1.21)
  • \components\com_virtuemart\js\mootools\mooPrompt.js (you have to revise it manually. Should change a lot of JS class definitions in accordance with mootools 1.21 syntax)
  • \components\com_virtuemart\js\slimbox (update to slimbox for mootools 1.21)
  • \components\com_virtuemart\themes\default\theme.js (you have to revise it manually. Should fix a bug on line 59, change to var timeoutID = setTimeout( ‘document.boxB.close()’, 3000 );)

Besides updating corresponding files, you can also disable Ajax function on the administration page. Or.. Wait until next stable release of VM). If you need the files above, just leave me a message, and I will pack them up for you.