Working with PHP in GWT hosted mode

February 19th, 2008 - Written by Chris Fong in Using GWT

Normally, when developing your GWT applications in hosted mode, the internal tomcat server will be used to serve up your application. However, if want to talk to a server-side php script running on your own local web server, you will soon run into issues with the Single Origin Policy, since hosted mode runs on one port and the php script is running on another. In this tutorial, I will show you how I got around by running my GWT application and the php script on the same local web server. To demonstrate this, I will use the GWT FileUpload widget with a php backend.

Getting started

This tutorial assumes you already have a local web server running that can handle php. I am personally using Apache via MAMP on OS X. XAMPP is also another easy to setup alternative for Windows.

To start, I created a project called FileUploader and imported it into my IDE (Eclipse). The code for the FileUploader module is directly taken from the example code in the FileUpload widget javadoc.

The only modification I made was to the setAction method of the FormPanel object.

(com.gwtsite.client.FileUploader.java)

final FormPanel form = new FormPanel();
form.setAction(GWT.getModuleBaseURL() + "upload.php");

Now when the user hits submit on the form, it will call the php script called upload.php to handle the file upload.

Using -noserver

To tell hosted mode not to use the internal tomcat server, we will pass the -noserver argument to the GWTShell. But first we have to perform the following steps:

First, notice that the url of my application is: http://localhost/com.gwtsite.FileUploader/Fileuploader.html

So I created a folder called com.gwtsite.FileUploader in my web server’s web documents folder. Next, I compiled my application and copied the following files to this new folder:

  • FileUploader.html
  • gwt.js
  • hosted.html
  • history.html
  • com.gwtsite.FileUploader.nocache.js

Then for the program arguments, i set the -noserver parameter and since my web server is running on port 80 I also set the -port parameter to 80.

fileuploader parameters

Finishing up

The upload.php script for handling the upload was taken from the online php manual. I placed it in the same com.gwtsite.FileUploader folder on my web server. All it does is move the uploaded file from the temp location to the specified directory. Notice that uploadFormElement matches the name set on the GWT FileUpload widget.

(upload.php)

<?php
$uploaddir = './';
$uploadfile = $uploaddir . basename($_FILES['uploadFormElement']['name']);
echo '<pre>';
if (move_uploaded_file($_FILES['uploadFormElement']['tmp_name'], $uploadfile)) {
    echo "File is valid, and was successfully uploaded.\n";
} else {
    echo "Possible file upload attack!\n";
}
...
?>

Once this is all wired up, I can now start up hosted mode from within my IDE and successfully upload files from within my GWT application.

References

7 Comments Subscribe to this feed Stumble it!

7 Comments »

Comment by ajay jetti
2009-05-20 12:20:27

Nice example i did something similar at(but a simpler example to get around Single origin policy

http://ajayjetti.com/gwt-php

 
Comment by ajayjetti
2009-06-11 07:52:40

please ignore the above link

Because of site restructuring, the above link is now available at http://ajayjetti.com/web-dev/gwt-php

 
Comment by Tiago
2009-08-12 18:26:05

Thank you, thank you a lot

 
 
Comment by Wing
2010-07-31 08:37:39

When I set the arguments -port 80 (which dissapears somehow) and -noserver, I got this when I try to run:

Loading modules
com.google.appengine.tools.development.gwt.AppEngineLauncher
[ERROR] Unable to find ‘com/google/appengine/tools/development/gwt/AppEngineLauncher.gwt.xml’ on your classpath; could be a typo, or maybe you forgot to include a classpath entry for source?

This is the link which I get returned:
http://127.0.0.1/BlackPanther......0.0.1:9997

When visit the link, the page can’t be found (404).

 
Comment by Wing
2010-08-02 05:58:37

It works now. I was using GWT 2.*. It contains small differents. Thanks for the tutorial.

 
Comment by dada Subscribed to comments via email
2010-10-20 00:28:44

You can achieve the same result setting up Virtual Host on your war folder and changing compiler arguments to point to html file via eg http://appaddress/AppIndex.html :)

 
Name (required)
E-mail (required - never shown publicly)
URI
Subscribe to comments via email
Your Comment (smaller size | larger size)
You may use <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> in your comment.