See all tutorials

Tutorials » How to generate dynamic web pages

Dynamic content can be defined as a content that varies from user to user or varies in time. Usually a web application will generate content as part of a client request, the server implementation will fetch necessary data from the underlying sources and will return it as part of the server response.

Webpagebytes CMS uses the MVC pattern where the server side request execution is covered by the Controller part, represented by the WPBRequestHandler interface.

To generate a dynamic page take the following tasks:

  1. Implement the Controller part of the MVC (by implementing WPBRequestHandler interface)
  2. Implement the View part of the MVC (by creating a site page)
  3. Create a site url that uses the created Controller
  4. Use the site page created to return the response content
  5. Test the dynamic content

Implement the Controller part of the MVC

Step 1

Implementing a controller means implementing two methods of WPBRequestHandler interface.
In this tutorial the controller will populate the Model with two dynamic variables, one is the current server time and another is a random GUID.
Below is the controller class source code, which needs to be added to the web application sources.

To be noted is that the controller will populate the model with two values having the keys: 'serverTime' and 'randomGuid'

package com.example;

import java.util.Date;
import java.util.UUID;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.webpagebytes.cms.WPBContentProvider;
import com.webpagebytes.cms.WPBForward;
import com.webpagebytes.cms.WPBModel;
import com.webpagebytes.cms.WPBRequestHandler;
import com.webpagebytes.cms.exception.WPBException;

public class SimpleController implements WPBRequestHandler {

    WPBContentProvider contentProvider;
    @Override
    public void initialize(WPBContentProvider contentProvider) 
    {
        this.contentProvider = contentProvider;        
    }

    @Override
    public void handleRequest(HttpServletRequest request,
                              HttpServletResponse response, 
                              WPBModel model, 
                              WPBForward forward) throws WPBException 
    {
        model.getCmsApplicationModel().put("serverTime", new Date());
        model.getCmsApplicationModel().put("randomGuid", UUID.randomUUID().toString());
        
        String pageGuid = model.getCmsModel().get(WPBModel.URI_PARAMETERS_KEY).get("pageGuid");
        
        forward.setForwardTo(pageGuid);        
    }
}

Implement the View part of the MVC

Step 2

To implement the View part of the MVC pattern, a site page needs to be created. Go to 'Site pages' section in Webpagebytes CMS administration interface and create a site page.

The site page HTML source will need to use Freemarker scripting and the wpbAppModel key to get the application model data.

Below is a very simple site page source that displays the two model values created at Step 1.

<html>
<body>
    <#assign aDate=wpbAppModel["serverTime"] aGuid=wpbAppModel["randomGuid"] />
    Server date: ${aDate?date}<br>
    Random Guid: ${aGuid}
</body>
</html>

Create a site url that uses the created Controller

Step 3

In order to pass a HTTP request execution to the Controller created at Step 1, a site url needs to be created. Complete the following fields when the site url is created:
Field Description
Site url Type /test . The dynamic page content will be available at /test URI
Is the url live Choose YES . If NO is selected then the HTTP request will return 404 status code
HTTP operation Choose GET . This is the HTTP verb that will be used to get the site page
Resource type Choose Url controller
Url controller Type the Controller class name including the package, in this case 'com.example.SimpleController'

Use the site page created to return the response content

Step 4

As seen in Step1 the Controller will read a 'pageGuid' customization parameter and will forward the request to use that site page. This step creates an url customization parameter named 'pageGuid' and will have the value of the site page externalKey.

Test the dynamic content

Step 5

Load the url created at step 4 in a browser to see the dynamic content generated. It should display the server date and a random GUID.
Dynamic content generated with Webpagebytes CMS

Fork me on GitHub