Home About Contact

Archive for the ‘Open Source’ Category

PHP functions in Javascript using PHP.JS

Posted by phorner On May 28, 2009

phpjsFor those of you, like me, who use PHP and Javascript regularly, PHP.JS is a great enhancement. PHP.JS is an open source project where PHP functions are ported to Javascript. This means that the PHP functionality is executed client-side which reduces the load on the server.

Some of the functions that have already been ported are:

  • md5()
  • date()
  • base64_decode()

As the library has become too big to include at once, and having users copy-paste functions to their projects can end up causing maintenance hell, the developers have created a compiler tool that allows programmers to select ONLY the functions they need, and wrap them up in a single php.js file.

Another benefit from this library is that it enhances the functionality of Javascript by adding functions that don’t exist natively in Javascript.

Definitely a great tool for developers.

For more information: PHP.JS

  • Share/Bookmark

phpMyAdmin 3.1.5 released

Posted by phorner On May 17, 2009

phpMyAdminphpMyAdmin 3.1.5 has been released. It is a bugfix-only version. Among the changes is a fix for PHP 5.3 compatibility.

For those of you who may not already know about phpMyAdmin, it is a free software tool written in PHP intended to handle the administration of MySQL.

Since version phpMyAdmin 3.x, support for PHP 4 has been dropped (as the official developers for PHP no longer support PHP 4 or earlier). If you still use PHP 4 on your server, then you can still use the phpMyAdmin 2.x series.

For more information: phpMyAdmin

  • Share/Bookmark

GalleryView: a jQuery Image Gallery

Posted by phorner On May 13, 2009

I was looking for a jQuery based gallery that could show images as a slideshow. I tested several possibilities but wasn’t really satisified as there was always something that wasn’t quite what I wanted. That’s when I stumbled across GalleryView.

Overlays

GalleryView is a jQuery plugin that allows you to create image galleries (and also insert HTML to be displayed as content). It takes an unordered list of images and turns it into a gallery. You can create several types of galleries, such as horizontal or vertical scrolling thumbnails, galleries with panel overlays and content panels. You can also customise the thumbnails width and height, the fade opacity, whether the images cross fade or just appear, and so on.

Here is some example Javascript showing some of the configuration features:

$(document).ready(function(){
$('#photos').galleryView({
panel_width: 800,
panel_height: 600,
frame_width: 150,
frame_height: 80,
start_frame: 5,
overlay_position: 'top',
filmstrip_position: 'left',
transition_speed: 1500,
transition_interval: 6500,
overlay_opacity: 0.55,
frame_opacity: 1.0,
nav_theme: 'light',
easing: 'easeInOutQuad',
show_captions: true,
fade_panels: false,
panel_scale: 'crop',
frame_scale: 'nocrop',
pointer_size: 12,
frame_gap: 10,
pause_on_hover: true
});
});

If you use the jQuery Easing plugin in addition, this will help to create a smoother filmstrip animation. You can also create your own theme for the styling of GalleryView. It comes with two themes, “light” and “dark”.

GalleryView is incredibly simple to setup. You’ll have a gallery up and running within about 10 minutes.

For more information: GalleryView

  • Share/Bookmark

EXTExt JS 3.0 RC1.1 comes hot on the heels of the release of Ext JS Core 3.0. Ext JS 3.0 is built to sit on top of Ext JS Core 3.0. Ext 3.0 provides increased performance, consistency, flexibility and UI enhancements all without a significant size increase.

The new features of Ext JS 3.0 are:

  • New UI components
  • Row Editor
  • List View
  • Charting
  • Button Groups
  • Grouped Tabs
  • Enhanced components
  • Buttons refactored to be a valid BoxComponent
  • Toolbar Overflow
  • Menu Overflow
  • Tooltips now support an anchor configuration
  • Buffered Gridview
  • Revamped Debug Console

Row EditorOther improvements include Ext.data package enhancements, Accessibility improvements, Ext.Direct and the refining of memory management within Ext.

For more information: Ext JS 3.0

  • Share/Bookmark

Multiple file upload using jQuery and Flash

Posted by phorner On May 1, 2009

I was recently searching for a solution that would allow people to upload photos of their homes on Golf Home Exchange. The standard upload method using HTML forms and PHP was not good enough as their was no indication of progress. As a result, the users thought the system wasn’t responding or something had gone wrong when simply it was taking a while to upload the image. Many simply gave up and never finished the registration process.

Luckily I stumbled across Uploadify, developed by Ronnie Garcia. Uploadify is a jQuery plugin that allows the easy integration of multiple (or single) file uploads. By default, the standard File Upload dialog in browsers only allows for single selection of files. To circumvent this issue and enable multiple file uploading, Flash is used.

To get started, you will need to download the jquery.uploadify-v1.6.2.zip package, then unzip and upload the files to your website.

Then in your HTML, add this code:

<body>
<input type="file" name="fileInput" id="fileInput" />
<script type="text/javascript">
$(document).ready(function() {
$('#fileInput').fileUpload ({
'uploader'  : 'uploader.swf',
'script'    : 'upload.php',
'cancelImg' : 'cancel.png',
'auto'      : true,
'folder'    : '/uploads'
});
});
</script>
</body>

This will set up Uploadify in it’s basic form. There are a ton of parameters you can set, plus event listeners (e.g. onAllComplete – triggers when all the files in the queue have been uploaded).

You can provide your own styled upload button and specifying the path to it by using the buttonImg parameter. If you want to customise the look of the upload progress bars, you will need to go into the Uploadify FLA and modify that manually.

Uploadify

You can also specify whether multiple files upload simultaneously or one at a time.

The script parameter allows you to specify your server side code that gets executed once a file has finished uploading. The example provided is PHP but you could use any backend development language.

There is only one downside to Uploadify, and that is that it needs Flash Player installed. If a user doesn’t have Flash Player installed, then it won’t work. I’m still looking for a File Upload solution for instances where the user doesn’t have Flash Player installed. Can anyone point me in the right direction?

Apart from this small issue, Uploadify is a solid alternative to using the standard File Upload dialog.

For more information and documentation: Uploadify

  • Share/Bookmark