As you are writing an Ajax application, you may want to allow users to upload files through an Ajax form. The folks over at AnyExample.com have put together a good tutorial on the subject. The tutorial uses PHP for the back end, but the principal is the same for any server side language.

Below is an excerpt from the tutorial.

How IFRAME file uploading works?

• There is a simple <form... which contains only <input type="file" ... > field.
  Target for this form is a hidden IFRAME (with "display: none;" CSS style) and
  OnChange event for the file field is set to JavaScript function which checks file extension (optional for this example, but
  very useful in general) and submits form.
• Special part of the script (marked FILEFRAME, see comments) saves file upload, checks for uploading errors and outputs JavaScript code to that
  hidden IFRAME.
  The javascript code uses parent.window.document object, which allows to modify parent document (visible page, which users is viewing).
  It sets filename value and enables submit button on the other form using getElementById method.
• The other form has 'description' text-field and hidden field 'filename'. User may fill 'description' field while file is uploading.
  When file uploading is finished, user press submit and "file information" page is generated (based on filename from hidden field and user's
  file description).

Possible drawback of this method is file garbage: files are uploaded even if user does not press submit button. You may need to write 'garbage file
collector' which will delete any unused file.

This example stores all uploaded file in filesystem folder. You need to specify it at the beginning of script, see variables $upload_dir and
$web_upload_dir. There is fail-checking which checks whether it is possible to write create files in upload directory.

We use following functions in this example:

PHP

• move_uploaded_file - move file uploaded to web server
• fopen - open file
• fwrite - write to opened file
• fclose - close file
• str_replace - replace one substring by another
• filesize - returns file size in bytes
• filemtime - returns file modification time

You can read the full post here.

Regular Expressions can be very useful tools for web developers. However, they can be a bit tricky to use, especially when you are not very experienced in web or software development. Well, over at Cats who Code they have put together a list of 15 useful regular expressions for web developers. The code is written in PHP, but should be fairly easy to translate to other languages.

Below is an excerpt from the post.

For many beginners, regular expressions seems to be hard to learn and use. In fact, they're far less hard than you may think. Before we dive deep inside regexp with useful and reusable codes, let's quickly see the basics:

Regular expressions syntax

Regular Expression	Will match...
foo	The string "foo"
^foo	"foo" at the start of a string
foo$	"foo" at the end of a string
^foo$	"foo" when it is alone on a string
[abc]	a, b, or c
[a-z]	Any lowercase letter
[^A-Z]	Any character that is not a uppercase letter
(gif|jpg)	Matches either "gif" or "jpeg"
[a-z]+	One or more lowercase letters
[0-9.-]	?ny number, dot, or minus sign
^[a-zA-Z0-9_]{1,}$	Any word of at least one letter, number or _
([wx])([yz])	wy, wz, xy, or xz
[^A-Za-z0-9]	Any symbol (not a number or a letter)
([A-Z]{3}|[0-9]{4})	Matches three letters or four numbers

 

PHP regular expression functions

Function	Description
preg_match()	The preg_match() function searches string for pattern, returning true if pattern exists, and false otherwise.
preg_match_all()	The preg_match_all() function matches all occurrences of pattern in string.
preg_replace()	The preg_replace() function operates just like ereg_replace(), except that regular expressions can be used in the pattern and replacement input parameters.
preg_split()	The preg_split() function operates exactly like split(), except that regular expressions are accepted as input parameters for pattern.
preg_grep()	The preg_grep() function searches all elements of input_array, returning all elements matching the regexp pattern.
preg_ quote()	Quote regular expression characters

You can read the full post here.

A new Visual WebGui RIA Platform showcase is published:
A Linux (Mono) Web based OS Deployment tool completed in just 2 weeks

The company needed to develop a solution which would operate as an OS Deployment tool that is customized for the needs of their Datacenter according the specific design parameters given.

The team decided not to use PHP but to use Mono (mod_mono) with Visual WebGui because of the short timeframe they had for deploying the solution and since Visual WebGui provided the easiest and quickest graphical development possible.

The web development process was straight forward. While the final goal was well defined, some of the concepts and functions were being defined while coding the solution. The Visual WebGui unique approach enabling easy integration of UserControls and intuitive graphical development allowed for this unstructured development cycle which led to an extremely shortened process as stated by Axel Westerhold: "Because of the easy graphical development environment and the integration into Visual Studio we were able to roll out the product within 2 weeks."

Go to the full case study.

Last time I told you that I was setting up a Pligg site for my new video game site, wastingtimegames.com. This is second in a series of posts where I will explain how to get a working customized Pligg site.

To install Pligg you will first need to download the files from pligg.com. The most current release is 1.0.0 RC2. Once you download the .zip file you will need to unzip all of the files into a folder.

To get the rest of the software installed you will just need to follow the below directions, taken from the Pligg readme file.

1. Create a mysql database. If you are unfamiliar with how to create a mysql database, please contact your web host or search their support site. Please pay careful attention when creating a database and write down your database name, username, password, and host somewhere.
2. Rename settings.php.default to settings.php. Do the same for /libs/dbconnect.php.default.
3. Upload the files to your server (please note that your server will need to be running PHP 4.3.0 or higher).
4. CHMOD 755 the following folders, if they give you errors try 777.
   • /admin/backup/
   • /avatars/groups_uploaded/
   • /avatars/user_uploaded/
   • /cache/
   • /cache/admin_c/
   • /cache/templates_c/
   • /languages/ (And all of the files contained in this folder should be CHMOD 777)
5. CHMOD 666 the following files
   • /libs/dbconnect.php
   • settings.php
6. Open /install/index.php in your web browser. If you are reading this document after you uploaded it to your server, click on the install link at the top of the page.
   • Select a language from the list.
   • Fill out your database name, username, password, host, and your desired table prefix.
   • Create an admin account. Please write down the login credentials for future reference.
   • Make sure there are no error messages!
7. Delete your /install folder.
8. CHMOD 644 libs/dbconnect.php
9. Open /index.php
10. Log in to the admin account using the credentials generated during the install process.
    
11. Log in to the admin panel ( /admin ) and you will then be presented with information intruducing you to Pligg.
12. Configure your Pligg site to your liking. Don't forget to use the Modify Language page to change your site's name.

Once you are done with these steps you'll have a basic Pligg site running. Next time I'll explain how to change the language features and install modules.

Pligg is a content management system that has evolved from a Digg clone to a full feature content management system. I've been working on some on-line video games and have been working on a site to host them. After some thought about the site, I decided to use Pligg and to allow users to submit their own game content as well as post my games.

The Pligg install is very easy to get up and running. So, my next few posts will be about the Pligg install and how I will modify the template and add modules to the site.

You can see the site that I've setup at wastingtimegames.com. The site is fully functional although I will be adding new features over the next few weeks and will be posting my games soon. So, stay tuned to see how to get your own Pligg site running quickly.

You can learn more about Pligg here.

The Eclipse Foundation has announced the 2.0 release of the Eclipse PHP Development Tools project (PDT). The project is sponsored by Zend and forms the basis of the commercial product Zend Studio.

Major features of this release include:

• A Hierarchy view for navigating the PHP object hierarchy.
• Easy searching for PHP types.
• Override indicators for PHP methods that override other methods.
• Performance improvements from using a new indexing and caching engine from the DLTK project.
• Improved code completion.

The PDT project is one of Eclipse's most popular downloads, with more than 1 million downloads to date. The plug-ins are available from the download page or through the download site at:

http://download.eclipse.org/tools/pdt/updates

You may have used Aptana's IDE for Ajax development. The IDE is a very good one and it just got better for us PHP developers. Aptana has announced the release of a PHP plugin for their IDE.

Below is an excerpt from the announcement.

PHP development and deployment just got way easier. Today, we're pleased to announce the 1.0 availability of the Aptana PHP development environment. It's got all the things you'd expect from a PHP IDE, plus all the Ajax tooling and other power tools from Aptana Studio. Combine that with the integrated PHP app hosting, staging and management features in Aptana Cloud and you've got an end-to-end PHP development and deployment environment with unprecedented ease of use.

You can read the full post here.

It's always good to see one of my favorite languages get more support in tools that many of us already use. Thanks Aptana, you gave me something to play with this weekend.

In the tradition of "Release early, release often", the Netbeans team has released version 6.5, continuing the rapid release cycle the project set with 5.5, 6.0, and 6.1. There many new features, most notably support for Groovy /Grails and PHP. Here's a short list of the other "new and notables":

• A new "Compile and Deploy on Save" feature for Java applications.
• Support for the Nimbus look and feel in the Swing GUI builder (Matisse)
• Big improvements in the JavaScript support, particularly in the area of debugging.
• Support for Ruby on Rails 2.1 (JRuby 1.1.4 is bundled)
• Improved SQL support, including SQL history and editor auto-completion.

There is also an early access release of Python support in Netbeans that is available as a separate download.

Get Netbeans 6.5 here.

Over at dev.base86, they've released version 2 of their Vista-like Ajax Calendar (vlaCalendar). The vlaCalendar is an unobtrusive JavaScript library that ports the UI functionality of the Windows Vista datepicker control to the web. The library requires the MooTools JavaScript framework as well as PHP.

In their own words:
Key features:

New features in version 2:

The vlaCalendar has been tested on:

• IE7 on Vista and XP Service Pack 2
• IE6 on XP Service Pack 2
• FireFox 2
• Opera 9

This script is licensed under the Creative Commons Attribution- NonCommercial 3.0 License.

A major drawback of the script is that it requires PHP. Although PHP is pretty common in web development, a better implementation could have been done with 100% JavaScript with no dependence on the server. Implementing the datepicker in this manner would have made it more flexible and compatible with all server-side languages. Hopefully we'll see this solution, or one like it, become fully client driven in the near future.

Learn more about vlaCalendar and check out some demos

Share
Close
• Social Web
• E-mail
• Delicious
• Digg
• StumbleUpon
• Propeller
• Reddit
• Magnoliacom
• Newsvine
• Furl
• Facebook
• Google
• Yahoo
• Technorati
• Icerocket
Your Email: *
Your Name: *
Send To: *
Enter one address or multiple addresses separated with commas.
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Math Question: * 1 + 4 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.

If you haven't heard the big news yet, the YouTube Data API has been updated and the YouTube Player APIs have been released. The APIs look very interesting with some much wanted features.

The below is the big news from the YouTube Blog.

Here's the sound byte: We now support upload, other write operations, and internationalized standard feeds. (And there was much rejoicing!) We're also introducing player APIs and a chromeless player -- a barebones player SWF that's fully customizable and controllable using the player APIs.

The Data API now allows for reading (nothing new), writing and uploading of data (the latter two are the big news). The API allows for you to do many things that can be done in YouTube, such as add comments about a video or upload videos to YouTube. Libraries for the API are available for Java and PHP (sorry Ruby developers at least for now).

You can read more about the Data API here.

The Player APIs now offer a Flash (Actionscript 2.0) API and a JavaScript API to allow more control over the player. The JavaScript API and Flash API are very similar (which makes since as they are both based on ECMA Script). The APIs have some very powerful hooks into the videos. My personal favorite hook is player.getPlayerState() which returns the state of the player. Possible values are unstarted (-1), ended (0), playing (1), paused (2), buffering (3), video cued (5).

You can read about the JavaScript API here and the Flash API here (note that the Flash API is almost exactly the same as the JavaScript API, so you will need to read both references if you are going to use the Flash API).

Perhaps Even bigger news is the release of the chromeless player. Below is an excerpt about the chromeless player from reference.

Getting Started

First off, you need a developer key. To register for one, visit the registration page.

The chromeless player consists of two SWF files. apiplayer.SWF contains the actual video playing functionality. cl.SWF is a loader SWF that loads apiplayer.SWF and exposes the player's API functions. It also provides security sandbox restrictions for the apiplayer.SWF, so loading SWFs cannot access elements inside the player directly.

The player can be controlled via two methods — by loading the SWF into another SWF (or Flash website, etc.), or by embedding it directly in an HTML page and using JavaScript to control the player. The JavaScript controls are identical to the embedded player's JavaScript API.

The URL to load the chromeless player SWF is:

http://gdata.youtube.com/apiplayer?key=DEV_KEY

Functions

The following operations are available in addition to the ones listed in the JavaScript API documentation.

loadVideoById(videoId:String, startSeconds:Number):Void

Load the specified video and starts playing the video. If startSeconds (number can be a float) is specified, the video will start from the closest keyframe to the specified time.

cueVideoById(videoId:String, startSeconds:Number):Void

Loads the specified video's thumbnail and prepares the player to play the video. The player does not request the FLV until playVideo() or seekTo() is called. startSeconds accepts a float/integer and specifies the time that the video should start playing from when playVideo() is called. If you specify startSeconds and then call seekTo(), the startSeconds is forgotten and the player plays from the time specified in the seekTo() call. When the video is cued and ready to play, the player will broadcast a video cued event (5).

setSize(width:Number, height:Number):Void

Sets the size of the chromeless player. This method should be used in favor of setting the width + height of the MovieClip directly. Note that this method does not constrain the proportions of the video player, so you will need to maintain a 4:3 aspect ratio. When embedding the player directly in HTML, the size is updated automatically to the Stage.width and Stage.height values, so there is no need to call setSize() when embedding the chromeless player directly into an HTML page. The default size of the SWF when loaded into another SWF is 320px by 240px.

You can read more about the new features at the YouTube API Blog.

I think that these new feature really make it possible to make some great mash-ups with YouTube. If you create a cool mash-up using some of the new features of the API or use the the Player APIs or use the chromeless player then I would love to hear about it (you can leave it in the comments or you can write a blog post about it using your free Ajaxonomy account.