Pressing the Red Button » PHP

How to Create an IE8 Accelerator

jim.richmond — Tue, 03 Nov 2009 06:43:35 +0000

Accelerators in Internet Explorer 8 are a new feature that allows you to select text and perform actions on it (like look up a word, map an address, etc.). This tutorial creates an accelerator that lets you select a song title or artist and listen to the music.

IE 8 Context Menu

Code is included that utilizes a JQuery front-end against a PHP webservice. To get the demo working on your own machine, some familiarity with JQuery and PHP is required.

Try The Demo

If you are using IE8, you can install the demo with this link:

Install “Listen To Music” Accelerator

You will get the message below, check the “Make this my default…”, and click Add.

Add Accelerator Popup

Once you have it installed it, you can select text on a web page and right click to bring up the menu. Hover over “Listen to Music” for a selection of available songs.
contextmenu

Try it out by selecting an artist or title below:

Michael Jackson seems to be popular, and who doesn’t know Thriller.

Once a song is selected, you are forwarded to the GrooveShark site where you can listen to the full song for free.

The Tutorial

Step 1: Set Up Your Development Environment

You will need a web server that runs PHP (Apache or IIS will work). Create a virtual directory called “musiclookup”. Copy all the files included in the tutorial code to the “musiclookup” directory you created. In this demo, we use localhost as the server, if you have another server name, you can manually update the references to localhost in the code.

Step 2: Testing your Environment

Now you have to test that the code works on your own machine and the rest of the steps are a breeze. Test the lookup page by going to:

http://localhost/musiclookup/lookup.html?s=Thriller

If a song list appears, then you are good to go:

This is what should appear when testing your local install.

If you don’t get the song list, there are some troubleshooting tips in the trouble.txt file included in the source.

Step 3: Creating Your Accelerator Installation File

IE Accelerators are installed by reading a specially formatted XML file. We are going use a modified version of the default installation file that Microsoft provides:



    http://localhost/musiclookup
    
        Listen to Music
        http://localhost/musiclookup/favicon.ico
        Listen to music using GrooveShark's TinySong api.

We’ll start by editing the basic details. Open the file called lookup.xml in the musiclookup folder you created and review the following settings:

homepageUrl: Modify this url if you used a server other than localhost.
name: Change the name to “My Music Lookup” (or some other custom name)
icon: The url of an icon that is displayed in the context menu. You can leave this.
description: A simple description can be entered here. You can leave this also.

Step 4: Setting up the Preview Action

The preview action is the url that will display the preview page:

We tested the preview page in step 2, so you can use the url here (unless you have a server name). One item to note is the “{selection}” text. This text is replaced with what the user selected when your preview page is displayed. Your preview page can then read this url variable and act on it. More url variables can be found in Micrsoft’s documentation.

Step 5: Setting up the Execute Action

The execute action is the url that you are forwarded to when you click the context menu.:

In our case we use a simple php page to redirect to the third party site that plays the music.

Step 6: Testing Your Accelerator

To test your accelerator, you must create a link to install it. A special Microsoft javascript function is used to call your xml file. You can see an example of this in the test.html file in the musiclookup folder:

Here you can test your accelerator.

Once you have it installed, you can select text on your page and see the preview. If you want to make changes to the configuration file, you can reinstall by simply clicking your install link again. You can also manually remove an Accelerator by going to the “Tools -> Manage Add-ons” menu item.

How The JQuery Front End Works:
What is neat about the preview action, is that it brings up a mini page that can run html and javascript like any other page. The preview page is a html page that references JQuery to call the web service and get some simple animation effects.

How the PHP Web Service Works:
The php code calls GrooveShark’s service (tinysong.com). It is a RESTful interface that returns results in plain text. The php code parses the results and reformats them into json to make it easier to use by the front end. The php web service also acts as a proxy because your preview page can not call a web service (tinysong) from another domain.

Making Improvements
There is certainly room for new feature and improvement. The preview page could be modified to include additional information or pull data from additional sources. While Grooveshark does not allow using their music player widgets, other services do (like Amazon, Real Networks or iTunes). The back end could be modified to pull from their web services and listen to the music directly on the preview page (although you don’t get to listen to the full song like you do when going to GrooveShark’s site).

The End
I hope you enjoyed the tutorial and that you get some use out of the accelerator. Feel free to ask any questions or make any suggestions.

Additional Resources

Setting MimeType in PHP

jim.richmond — Tue, 23 Jun 2009 06:38:54 +0000

Setting the Mime Type allows you to tell the browser what type of response that it is going to receive. This is useful for returning non html results like file downloads, xml and JSON.

//Setting a XML File Type in PHP
$mtype = "text/xml";
header("Content-Type: " . $mtype);

//Setting a File Download Type in PHP
$mtype = "application/octet-stream";
header("Content-Type: " . $mtype);

//Setting a JSON results type in PHP
$mtype = "application/javascript";
header("Content-Type: " . $mtype);

Here is a list of common mime types:
Javascript - application/javascript
Java – application/x-java-applet
Java – application/x-java-bean
Java – application/x-java-vm
Flash – application/x-shockwave-flash
MP3 – audio/mp3
JPEG – image/jpeg
JPG – image/jpg
GIF – image/gif
PNG – image/png
HTML – text/html
CSS – text/css
Text File – text/plain
XML – text/xml
Video AVI – video/avi
Video Microsoft – video/msvideo
Video QuickTime – video/quicktime
Video DIVX – video/divx
File Download – application/octet-stream

How to Install PHP CURL on IIS

jim.richmond — Mon, 22 Jun 2009 06:35:11 +0000

Are you getting this error:
Fatal error: Call to undefined function curl_init() in C:\myfile.php on line 100

A quick overview on how to get the php_curl.dll working on IIS. This works with PHP 5.x on Windows. Most likely you did not install the CURL extension when you first installed PHP on your machine. Below is the easiest method to install any missing extensions (like CURL):

Go to Add/Remove Programs in Control Panel, Find the PHP 5 installation in the list and click Change.
When the installer comes up, click Change

Changing Your PHP Installation to Install an Extension
Find Curl in the list of extensions and click OK to save and finish the installation

Installing CURL using the PHP Installer
Restart IIS (from command Prompt, type “iisreset”). Now curl should be working for you.

This is much easier that having to find the dll yourself and modifying the php.ini file.

SQL Hacks: Sequentially Numbering Records

jim.richmond — Mon, 11 Dec 2006 19:45:34 +0000

It is a simple concept, I want each record of a SQL result set to be numbered 1 through X. Well SQL wasn't really designed to do this so here come some the ugliest hacks you'll every see to "just get it done".

Here is some more background. I got contracted to write some fixes for an existing ecommerce web site written in PHP/MySQL. One of those fixes was a bug that occurred when trying to sort the store's products in the admin interface. Each product had a sort order that could be manually adjusted using these up and down arrows. Common approach, but it wasn't implemented well. I'm not going to go into any more details, but the simple fix was to create a function that could reset the sort when needed.

I wanted a quick way to regenerate the sort order numbers based on the SQL result set. I did some googling and found this link pertaining to Microsoft SQL Server.:
Database Journal Article

These methods could be modified to work with MySQL but I needed something more elegant. I found my solution in the least likely of places, the manual.

Displaying Sequential Numbers in MySQL:

PLAIN TEXT

SQL:

SET @rnk=0;
SELECT id, @rnk:=@rnk+1 AS product_order
FROM products ORDER BY product_name;

Now for the let down. It won't work in PHP 4/MySQL. This is typical when working in LAMP. You develop code locally, go to move it to the client's machine and they have minor versions differences and your code doesn't work. The solution above requires two SQL statements and the PHP MySQL library does not allow the running of multiple queries at the same time (to prevent SQL injection attacks). Supposedly it will work in PHP 5/MySQL with the mysqli_multi_query but I didn't have time to test.

Since excuses don't pay the bills, I had to resort to an ugly hack (as opposed to elegant hack). I didn't really like the methods in the Database Journal link above so I made my own:

Displaying Sequential numbers in MySQL/PHP4:
The basic idea behind this one is to use a seperate table to update the sort order.
1. Create a Sort Table

PLAIN TEXT

SQL:

CREATE TABLE `sort_order` (
`id` int(11) NOT NULL DEFAULT '0',
`order` int(11) NOT NULL AUTO_INCREMENT,
PRIMARY KEY (`order`)
)

2. Run the SQL that will update the sort

PLAIN TEXT

SQL:

#first clear the table
TRUNCATE TABLE sort_order;
#reset the auto increment
ALTER TABLE sort_order AUTO_INCREMENT=1;
#insert the id's of the records sorted the way you want
INSERT INTO sort_order (id)
SELECT id FROM products ORDER BY product_order;
#update the sort order field
UPDATE products p
INNER JOIN sort_order so ON p.id = so.id
SET p.product_order = so.ORDER;

This was a quick and dirty hack but it worked for the situation. For multi-user use, I would put the statements in a transaction.

Let me know if you have any questions or come up with anything else.