Monthly Archives December 2012

Embedding a ZK application inside a WordPress page

Posted by admin on December 28, 2012  /   Posted in Web Development, ZK

by Cancan Gunadi

Background
There is no doubt that WordPress has emerged into one of the frameworks of choice when it comes to customizable presentation layer that manages static and series-oriented contents. But one obvious area that WordPress isn’t designed to handle is dynamic, transactional UI such as those found in a full-blown web-applications.

What if I offer to show you to have the cake and eat it too?
Have you ever wondered how to embed another web application inside a WordPress page?

Case Study
For example, one of our clients’ project, which is built using WordPress, requires a sophisticated (in terms of presentation and validation) registration form. This online registration form takes the input from the user and writes to a non-wordpress database.

In this case, the form is a Java web application written using ZK Ajax Framework (http://zkoss.org) which talks to Spring-Hibernate backend. To make things more interesting, this Java web application needs to accept a query string parameter that is passed through the main WordPress website URL. That means having to go through WordPress’ PHP code.

Let us see how to do this.

Approach
First, the setup. I have an existing WordPress installed like usual within apache and the ZK Java web application is deployed on tomcat.

This is an example of how the registration form looks like:

Let’s say that my WordPress site is at “http://mysite.com?myparam=abc”. Now I want to add a page on this site which contains the Java web application (the registration form). The Java web application itself is reachable via this url: “http://mysite.com/somepath/zkform?someparam=somevalue” and the “myparam” parameter above must be propagated from the main URL of my WordPress site to the Java web app, i.e: “http://mysite.com/somepath/zkform?myparam=abc“.

In my project, I implemented this by first storing the query string parameter in a cookie, then using a custom iframe (implemented using WordPress shortcode) to retrieve the query string from the cookie and append it to the ZK application URL.

Steps

  1. Write a WordPress plugin which stores the query string param in a cookie such as the following:
  2. add_action('init', 'storeParamInsideCookie');
    function storeParamInsideCookie() {
        $myparam = $_GET['myparam'];
        if (isset($myparam)) {
            $cookieResult = setcookie("myparam", $myparam);
        }
    }
  3. Write another WordPress plugin which defines a shortcode for inserting the Java web application inside an IFrame. The shortcode extracts the param from the cookie, and then pass it along to the src of the iframe:
  4. if ( !function_exists( 'myiframe_shortcode' ) ) :
    
        function myiframe_shortcode( $atts, $content = null ) {
            $myparam = $_COOKIE['myparam'];        
            $html .= ' $value) {
                if( $value != '' ) { // adding all attributes
                    $html .= ' ' . $attr . '="' . $value . '"';
                } else { // adding empty attributes
                    $html .= ' ' . $attr;
                }
            }
    
            $html .= ' src="' . $content;
            global $wp_query;
    
            if (isset($myparam)) {
                $html .= '?myparam=' . $myparam;
            }    
            $html .= '"';
    
            $html .= '>';
            return $html;
    
        }
        add_shortcode('myiframe', 'myiframe_shortcode');
    
    endif;
  5. Install the plugins and activate them in WordPress.
  6. Create a WordPress page, and call the myiframe shortcode to embed the Java web application within the page. Using the normal WordPress editor, add the following line to the page:
  7. [myiframe width="800" height="700"]http://mysite.com/somepath/zkform[/myiframe]

And… voila! Here’s how the resulting page looks like:

Conclusion
In this article, I have shown you how to make two popular application frameworks work seamlessly. A custom ZK -based Java web application that provides sophisticated functionality beyond what WordPress can do, is inserted into a WordPress page using an iframe. Not only that, I have also shown how parameters can travel between WordPress and ZK via a query string and a cookie, thus extending the usefulness of this method in a variety of situations.

As a caveat, there are also other factors that need to be considered when putting something like this together, such as managing the sometime-unavoidable scrollbar of the iframe, which may result in additional scrolling on top of the normal browser scrollbar. Obviously, the php codes that we show here can be improved, but hopefully this post gave you some inspiration on how it can be achieved. Enjoy!


We serve businesses of any type and size
Contact Us Today
502 Bad Gateway

502 Bad Gateway


nginx