Article summary

Summary

Discusses how to create an Adobe Experience Manager application that is able to persist data in a relational database. In this article, the OSGi bundle persists data into MySQL. An Eclipse Plugin is used to create the OSGi bundle in this development article.

A special thank you to community member Ranta Kumar Kotla for testing this Community Article to ensure it works.

Digital Marketing Solution(s) Adobe Experience Manager (Adobe CQ)
Audience
Developer (intermediate)
Required Skills
Java, JQuery, SQL, CSS
Tested On Adobe Experience Manager 5.5, 5.6

Introduction

You can create an Adobe Experience Manager application that captures data from users and stores the data in either the Java Content Repository (JCR) or other back ends such as a relational database. For example, if your organization uses a relational database such as MySQL, you can create an Experience Manager application that persists data into MySQL.

sqlpersist

Assume that you want to create an Experience Manager application that tracks your customers.

Cust

When an end user fills in the web form and clicks the Add Customer button, customer information is added to the database. The primary key value is returned and displayed in the Customer Id field.

This article guides you through creating an Experience Manager web application that captures data from an end user and persists the data in the Customer table.

Field name
Field Type
Key
custId
An integer that specifies the customer identifier value.
PK
custFirst
A string value that specifies the customer’s first name.
N/A
custLast
A string value that specifies the customer’s last name.
N/A
custDesc
A string value that specifies the customer’s description.
N/A
custAddress
A string value that specifies the customer’s address or phone number.
N/A

Note:

This development environment connects to a database by using a custom Java class that uses the JDBC API. You can create an OSGi bundle that is able to connect to a relational database by using a DataSourcePool. In this situation, you do not have to write a custom Java connection class. For information, see  Injecting a DataSourcePool Service into an Adobe Experience Manager OSGi bundle.

Note:

Before following along with this development article, setup MySQL and create a database schema named cq that contains the Customer table. See www.mysql.com.

Note:

If you are interesting in persisting data in the Experience Manager JCR as opposed to a relational database, then see Persisting Experience Manager data in the Java Content Repository.

Create an Experience Manager application folder structure

Create an application folder structure that contains templates, components, and pages by using CRXDE Lite.

CQAppSetup

The following describes each application folder:

  • application name: contains all of the resources that an application uses. The resources can be templates, pages, components, and so on. 
  • components: contains components that your application uses. 
  • page: contains page components. A page component is a script such as a JSP file. 
  • global: contains global components that your application uses.
  • template: contains templates that you can base page components on. 
  • src: contains source code that comprises an OSGi component (this development article does not create an OSGi bundle using this folder). 
  • install: contains a compiled OSGi bundles container.

To create an application folder structure:

  1. To view the welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.
  2. Select CRXDE Lite.
  3. Right-click the apps folder (or the parent folder), select Create, Create Folder.
  4. Enter the folder name into the Create Folder dialog box. Enter sqlpersist
  5. Repeat steps 1-4 for each folder specified in the previous illustration. 
  6. Click the Save All button. 

Note:

You have to click the Save All button when working in CRXDELite for the changes to be made.

Create a template

You can create a template by using CRXDE Lite. An Experience Manager template enables you to define a consistent style for the pages in your application. A template comprises of nodes that that specify the page structure. For more information about templates, see Templates

To create a template, perform these tasks:

1. To view the welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.

2. Select CRXDE Lite.

3. Right-click the template folder (within your application), select Create, Create Template.

4. Enter the following information into the Create Template dialog box:

  • Label: The name of the template to create. Enter templateSQL
  • Title: The title that is assigned to the template
  • Description: The description that is assigned to the template
  • Resource Type: The component's path that is assigned to the template and copied to implementing pages. Enter sqlpersist/components/page/templateSQL.
  • Ranking: The order (ascending) in which this template will appear in relation to other templates. Setting this value to 1 ensures that the template appears first in the list.

5. Add a path to Allowed Paths. Click on the plus sign and enter the following value: /content(/.*)?

6. Click Next for Allowed Parents.

7. Select OK on Allowed Children.

Create a render component that uses the template

Components are re-usable modules that implement specific application logic to render the content of your web site. You can think of a component as a collection of scripts (for example, JSPs, Java servlets, and so on) that completely realize a specific function. In order to realize this functionality, it is your responsibility as an Experience Manager developer to create scripts that perform specific functionality. For more information about components, see Components.

By default, a component has at least one default script, identical to the name of the component. To create a render component, perform these tasks:

1. To view the welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.

2. Select CRXDE Lite.

3. Right-click /apps/sqlpersist/components/page, then select Create, Create Component.

4. Enter the following information into the Create Component dialog box:

  • Label: The name of the component to create. Enter templateSQL
  • Title: The title that is assigned to the component.
  • Description: The description that is assigned to the template.

5. Select Next for Advanced Component Settings and Allowed Parents.

6. Select OK on Allowed Children.

7. Open the templateSQL.jsp located at: /apps/sqlpersist/components/page/templateSQL/templateSQL.jsp.

8. Enter the following JSP code:

<html>
<head>
<title>Hello World !!!</title>
</head>
<body>
<h1>Hello JDBC!!!</h1>
<h2>This page will update the Customer table in MySQL</h2>
</body>
</html>

Create Java JDBC application logic

The OSGi bundle that is created in this development article contains the following two Java classes:

  • ConnectionHelper: establishes a connection to MySQL. 
  • CustomerService: updates the Customer table in the MySQL database.

The following Java code represents the ConnectionHelper class.

package com.adobe.cq;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
 
public class ConnectionHelper
{
  private String url;
  private static ConnectionHelper instance;
  private ConnectionHelper()
  {
    try {
      Class.forName("com.mysql.jdbc.Driver").newInstance();
      url = "jdbc:mysql://localhost:3306/cq";
    }
    catch (Exception e) {
      e.printStackTrace();
    }
  }
  public static Connection getConnection() throws SQLException {
    if (instance == null) {
      instance = new ConnectionHelper();
    }
    try {
      return DriverManager.getConnection(instance.url, "root", "root");
    }
    catch (SQLException e) {
      throw e;
    }
  }
  public static void close(Connection connection)
  {
    try {
      if (connection != null) {
      connection.close();
   }
  }
    catch (SQLException e) {
      e.printStackTrace();
    }
  }
}

Notice that the ConnectionHelper class is located in a Java package named com.adobe.cq. This class creates a connection to the database located at jdbc:mysql://localhost:3306/CQ.

Note:

Hard-coded values such as the value to the MySQL database is not good practice to use within a production environment. For example, you will have to change the code when the host name of the database server changes. It's better practice to make it configurable. However, to keep this development article simple, the URL to the database server is hard-coded in the Java logic.

The following Java code represents the CustomerService class that updates the Customer table.

package com.adobe.cq;

import com.adobe.cq.ConnectionHelper;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.Statement;

public class CustomerService {
	
	public int injestCustData(String firstName, String lastName, String phone, String desc)
	{
		    Connection c = null;
		    int rowCount= 0; 
		    try {
		    		  		    	
		    	  // Create a Connection object
		          c =  ConnectionHelper.getConnection();
		     
		           ResultSet rs = null;
		           Statement s = c.createStatement();
		           Statement scount = c.createStatement();
		           
		           //Use prepared statements to protected against SQL injection attacks
		           PreparedStatement pstmt = null;
		           PreparedStatement ps = null; 
		  		           
		           //Set the query and use a preparedStatement
		           String query = "Select * FROM Customer";
		           pstmt = c.prepareStatement(query); 
		           rs = pstmt.executeQuery();
		           
		           while (rs.next()) 
		        	    rowCount++;
		        	        	
		           //Set the PK value
		           int pkVal = rowCount + 2; 
		           
		           String insert = "INSERT INTO Customer(custId,custFirst,custLast,custDesc,custAddress) VALUES(?, ?, ?, ?, ?);";
		           ps = c.prepareStatement(insert);
		           ps.setInt(1, pkVal);
		           ps.setString(2, firstName);
		           ps.setString(3, lastName);
		           ps.setString(4, phone);
		           ps.setString(5, desc);
		           ps.execute();
		           return pkVal;
		    }
		    catch (Exception e) {
		      e.printStackTrace();
		     }
		    finally {
		      ConnectionHelper.close(c);
	    }
		    return 0; 
     }
}

This class contains a method named injestCustData that calls the ConnectionHelper object’s static method named getConnection to establish a connection to the MySQL database. The four values that are passed to the injestCustData method are persisted into the Customer table using a SQL PreparedStatement instance (to project against SQL injection attacks). The four values are obtained from the client JSP. The primary key is programmatically generated and is used as a return value for the injestCustData method. The return value is displayed in the client JSP. 

Note:

Ensure you add the MySQL JAR file to your Java project's class path. In addition, the MySQL JAR file is also included in the OSGi bundle that is deployed to Experience Manager. The MySQL JAR file that is used in this development article is named mysql-connector-java-5.1.22. 

Create the Java JDBC classes:

  1. Create an Eclipse Java project and name the project CQJDBCProject.
  2. Add the MySQL JAR file to your Eclipse project’s class path.
  3. Add the Java classes specified in this section to your Eclipse project. Add the Java JDBC application logic to the classes.
  4. Compile and build your Java project.
  5. Export the project to a JAR file named CQJDBC.jar. (This JAR file is bundled into an OSGi bundle in the next step.)

Note:

Instead of developing your own JDBC classes, another option you have is to use the Adobe Experience Manager JDBC connector. Experience Manager contains an integration for JDBC whereby you can configure connections and get a connection pool for free as an OSGi service. See http://docs.adobe.com/docs/en/cq/current/developing/jdbc.html. (This article taught you how to develop your own classes for possible customization.)

Create and deploy the OSGi bundle that contains the Java JDBC logic

Create an OSGi bundle that contains the CQJDBC.jar and mysql-connector-java-5.1.6.jar files. After you upload the OSGi bundle, you can invoke the injestCustData method of the CustomerService class. To create the OSGi bundle, you use another Eclipse project that creates an OSGi bundle. An OSGi bundle is essentially a collection of Java files and a MANIFEST.MF file.

Create an OSGi bundle that contains the JDBC application logic:

1. Start Eclipse (Indigo). The steps below have been tested on Eclipse Java EE IDE for Web Developers version Indigo Service Release 1.

2. Select File, New, Other.

3. Under the Plug-in Development folder, choose Plug-in from Existing JAR Archives. Name your project CQSQLBundle.

4. In the JAR selection dialog, click the Add external button, and browse to the CQJDBC.jar file that you created in the previous step. Also include the MySQL database driver file. (If you are using another database, you must include your database driver file into the OSGi bundle. Otherwise, the OSGi bundle will not be able to store or retrieve data from the database.)

5. Click Next.

6. In the Plug-in Project properties dialog, ensure that you check the checkbox for Analyze library contents and add dependencies.

7. Make sure that the Target Platform is the standard OSGi framework.

8. Ensure the checkboxes for Unzip the JAR archives into the project and Update references to the JAR files are both checked.

Click Next, and then Finish.

10. Click the Runtime tab.

11. Make sure that the Exported Packages list is populated.

12. Make sure these packages have been added under the Export-Package header in MANIFEST.MF. Remove the version information in the MANIFEST.MF file. Version numbers can cause conflicts when you upload the OSGi bundle.

13. Also make sure that the Import-Package header in MANIFEST.MF is also populated, as shown here.

Bundle-Name: DatabaseDriver3
Bundle-SymbolicName: DatabaseDriver3
Bundle-Version: 1.0.0
Export-Package: com.adobe.cq,
com.mysql.jdbc,
com.mysql.jdbc.exceptions,
com.mysql.jdbc.exceptions.jdbc4,
com.mysql.jdbc.integration.c3p0,
com.mysql.jdbc.integration.jboss,
com.mysql.jdbc.interceptors,
com.mysql.jdbc.jdbc2.optional,
com.mysql.jdbc.log,
com.mysql.jdbc.profiler,
com.mysql.jdbc.util,
org.gjt.mm.mysql
Import-Package: javax.sql,
javax.xml.transform.stream,
javax.naming.spi,
javax.transaction.xa,
org.apache.log4j,
javax.net,
javax.xml.transform.dom,
org.w3c.dom,
javax.xml.transform.sax,
javax.xml.stream,
javax.net.ssl,
org.apache.commons.logging,
org.xml.sax,
javax.xml.transform,
javax.naming,
javax.xml.transform.stax,
javax.xml.parsers,
org.xml.sax.helpers
Bundle-RequiredExecutionEnvironment: JavaSE-1.6

14. Save the project.

15. Build the OSGi bundle by right-clicking the project in the left pane, choose Export, Plug-in Development, Deployable plug-ins and fragments, and click Next.

16. Select a location for the export (C:\TEMP) and click Finish. (Ignore any error messages).

17. In C:\TEMP\plugins, you should now find the OSGi bundle.

18. Login to the Apache Felix Web Console at http://server:port/system/console/bundles (default admin user = admin with password= admin).

19. Sort the bundle list by Id and note the Id of the last bundle.

20. Click the Install/Update button.

21. Check the Start Bundle checkbox.

22. Browse to the bundle JAR file you just built. (C:\TEMP\plugins).

23. Click Install.

24. Click the Refresh Packages button.

25. Check the bundle with the highest Id.

26. Your new bundle should now be listed with the status Active.

27. If the status is not Active, check the error.log for exceptions. If you get “org.osgi.framework.BundleException: Unresolved constraint” errors, check the MANIFEST.MF for strict version requirements which might follow: javax.xml.namespace; version=”3.1.0”

28. If the version requirement causes problems, remove it so that the entry looks like this: javax.xml.namespace.

29. If the entry is not required, remove it entirely.

30. Rebuild the bundle.

31. Delete the previous bundle and deploy the new one.

Add CSS and JQuery files to a CQ:ClientLibraryFolder node

You add a CSS file and a JQuery framework file to a cq:ClientLibraryFolder node to define the style of the client JSP. The JQuery framework file that is added is named jquery-1.6.3.min.js.

To add CSS files and the JQuery framework to your component, add a cq:ClientLibraryFolder node to your component. After you create the node, set properties that allow the JSP script to find the CSS files and the JQuery library files.

To add the JQuery framework, add a new node named clientlibs to your component (as discussed later). Add these two properties to this node.

Name Type Value
dependencies
String[]
cq.jquery
categories
String[]
jquerysamples

The dependencies property informs Experience Manager to include the CSS and JQuery libraries in the page. The categories property informs the server which clientlibs must be included.

After you create the Clientlibs folder, add a CSS file, and the JQuery library file, and two map text files.

clientLib

Site css file

The site.css file defines the display style for the client JSP file that lets the user enter and submit data. The following code represents the site.css file.

/* reset */
html, body, div, span, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
html , body{
 line-height: 1;
 background-color: #334873;
 background-image: url(../_images/bg-page2.png);
}
 
ol, ul {
 list-style: none;
}
 
 
table {
 border-collapse: collapse;
 border-spacing: 0;
}
/* end reset*/
 
 
 
h1, h2, h3 {
 font-family: 'ColaborateRegular', Arial, sans-serif; 
}
 
 
strong {
 font-family: 'ColaborateMediumRegular', Arial, sans-serif; 
}
 
em {
 font-family: 'ColaborateThinRegular', Arial, sans-serif; 
}
 
.content {
 max-width: 760px;
 margin: 20px 0 0 100px;
}
 
.clear:after { 
content: "."; display: block; height: 0; clear: both; visibility: hidden; 
}
 
.clear {
 min-height: 1px;
}
 
* html .clear {
 height: 1px;
}
 
.header {
 position: relative;
 border-top: solid 6px white;
 padding: 10px 0 10px 0;
 margin-bottom: 20px;
}
 
 
.main {
 xxposition: relative;
 padding-bottom: 1em;
 border-bottom: solid 1px rgba(255,255,255,.5);
 xxoverflow:hidden;
 xxmin-height: 300px;
}
 
.main h1 {
 font-size: 32px;
 color: white;
 text-shadow: 1px 1px 1px rgba(0,0,0,.75);
 border-bottom: solid 1px rgba(255,255,255,.5);
 margin-bottom: 0.75em;
}
 
 
p , li, legend , form{
 font-size: 18px;
 color: white;
 font-family: 'ColaborateLightRegular', Arial, sans-serif;
 line-height: 125%;
 margin-bottom: 10px;
}
 
fieldset {
 padding: 10px;
 border: 1px solid white;
 margin: 25px 0; 
}
 
.nav {
 margin: 10px 0 0 100px; 
}
 
.nav li {
 display: inline-block; 
}
 
.nav a:hover, .example:hover{
 background-color: rgba(255,255,255,.85);
 color: rgb(0,0,0);
}
 
h3 {
 font-size: 18px;
 color: rgb(227,198,133);;
}
 
.results h2 {
 color: rgba(255,255,255,1);
}
.results div {
 padding-bottom: 10px;
}
.results div code {
 float: right;
 width: 60%;
}
 
input {
 font-size: 20px;
}
.form .wide {
 font-size: 18px;
 width: 100%;
}
.resultSection {
 float: right;
 width: 45%;
 margin-left: 20px;
}
#regexTester {
 margin-right: 55%;
}
.sideBySide li {
 float: left;
 overflow: hidden;
 width: 220px;
}
.clickable {
 cursor:pointer;
 margin-bottom: 5px;
}
 
.clickable:hover {
background-color:#FFC;
}
 
 
.col1 {
 float: left;
 width: 75%; 
}
.col2 {
 float: right;
 width: 20%; 
}
 
.col2 ul {
 margin-left: 20px;
 list-style: square;
}
.col2 li {
 font-size: 90%; 
}
 
 
#selectorList {
 overflow: hidden; 
}
#selector {
 width: 275px;
}
 
 
form#signup .label {
 width: 200px; 
}

Text files

You have to add two text files to the clientlibs folder. These text files map to the JS file and the CSS file. The names of the text files are: css.txt and js.txt.

The css.txt file contains the CSS file name: site.css. Likewise, the js.txt file contains the JS file name: jquery-1.6.3.min.js. 

Add the files to the ClientLibs folder

  1. Right-click /apps/sqlpersist/components then select New, Node.
  2. Make sure that the node type is cq:ClientLibraryFolder and name the node clientlibs.
  3. Right click on clientlibs and select Properties. Add the two properties specified in the previous table to the node.
  4. On your file system, navigate to the folder where the JQuery JS file is located. Drag and drop the jquery-1.6.3.min.js file to the clientlibs node by using CRXDE.
  5. On your file system, navigate where you placed the CSS file. Drag and drop the site.css files to the clientlibs folder by using CRXDE.
  6. Add a TXT file to the clientlibs folder named js.txt. The content of the js.txt file is the JQuery JS file name.
  7. Add a TXT file to the clientlibs node named css.txt. The content of the css.txt file is the CSS file name.

Modify the JSP to call the injestCustData method defined in the OSGi bundle

To create the Experience Manager web client, create these two files:

  • persist.json.jsp: contains application logic that calls the OSGI bundle’s injestCustData method. 
  • templateSQL.jsp: contains application logic that defines the JSP that lets a user enter and submit customer information. 

Create the persist.json.jsp file

Add a new JSP file named persist.json.jsp to the following path:

/apps/sqlpersist/components/page/templateSQL

In persist.json.jsp, create a CustomerService instance and call its injestCustData method. Pass the following values to this method:

  • A string value that specifies the customer's first name.
  • A string value that specifies the customer's last name.
  • A string value that specifies the customers address or phone number.
  • A string value that specifies a description. 


The CustomerlService class is defined in the deployed OSGi bunlde. To successfully create this instance, ensure that you specify the following page import statement:

page import="org.apache.sling.commons.json.io.*,com.adobe.cq..*"

This code represents the persist.json.jsp file:

<%@ page import="org.apache.sling.commons.json.io.*,com.adobe.cq.*" %><%
String first = request.getParameter("first");
String last = request.getParameter("last");
String phone = request.getParameter("phone");
String desc = request.getParameter("desc");

//invoke the CustomerServer object's injestCustData method
com.adobe.cq.CustomerService custService = new com.adobe.cq.CustomerService();
int myPK = custService.injestCustData(first, last, phone, desc) ; 
 
//Send the data back to the client 
JSONWriter writer = new JSONWriter(response.getWriter());
writer.object();
writer.key("pk");
writer.value(myPK);

writer.endObject();
%>

In this code example, notice that a JSONWriter instance is created. This object is used to return data to the main JSP client after the call to the OSGi bundle is made. In this example, the primary key value of the new customer record is send back client JSP. 

Modify the templateSQL.jsp 

Modify the templateSQL.jsp file to call the persist.json.jsp when the submit button is clicked. In this example, a JQuery Ajax HTTP request is used and the four values are passed to the persist.json.jsp. This code shows the submit method that is called when the user fills in the data and clicks the submit button.

('#submit').click(function() {
    var failure = function(err) {
             alert("Unable to retrive data "+err);
     };
     
     
    //Get the user-defined values to persist in the database
    var myFirst= $('#first').val() ; 
    var myLast= $('#last').val() ; 
    var myDescription= $('#description').val() ; 
    var myAddress= $('#address').val() ; 
     
    var url = location.pathname.replace(".html", "/_jcr_content.persist.json") + "?first="+ myFirst +"&last="+myLast +"&desc="+myDescription +"&phone="+myAddress;
        
    $.ajax(url, {
        dataType: "text",
        success: function(rawData, status, xhr) {
            var data;
            try {
                data = $.parseJSON(rawData);
                 
                   
                //Set the customer id field
                $('#custId').val(data.pk); 
                 } catch(err) {
                failure(err);
            }
        },
        error: function(xhr, status, err) {
            failure(err);
        } 
    });

The following code represents the entire templateSQL JSP file. 

<%@include file="/libs/foundation/global.jsp"%>
<cq:includeClientLib categories="jquerysamples" />
<html>
<head>
<meta charset="UTF-8">
<title>Adobe CQ Persist Page</title>
<style>
#signup .indent label.error {
  margin-left: 0;
}
#signup label.error {
  font-size: 0.8em;
  color: #F00;
  font-weight: bold;
  display: block;
  margin-left: 215px;
}
#signup  input.error, #signup select.error  {
  background: #FFA9B8;
  border: 1px solid red;
}
</style>
<script>
$(document).ready(function() {
     
    $('body').hide().fadeIn(5000);
     
$('#submit').click(function() {
    var failure = function(err) {
             alert("Unable to retrive data "+err);
   };
     
    //Get the user-defined values to persist in the database
    var myFirst= $('#first').val() ; 
    var myLast= $('#last').val() ; 
    var myDescription= $('#description').val() ; 
    var myAddress= $('#address').val() ; 
     
    var url = location.pathname.replace(".html", "/_jcr_content.persist.json") + "?first="+ myFirst +"&last="+myLast +"&desc="+myDescription +"&phone="+myAddress;
          
    $.ajax(url, {
        dataType: "text",
        success: function(rawData, status, xhr) {
            var data;
            try {
                data = $.parseJSON(rawData);
                               
                //Set the fields in the forum
                $('#custId').val(data.pk); 
             } catch(err) {
                failure(err);
            }
        },
        error: function(xhr, status, err) {
            failure(err);
        } 
    });
  });
 
}); // end ready
</script>
</head>
<body>
<div class="wrapper">
    <div class="header">
        <p class="logo">Adobe CQ Data Customer Persist Application</p>
    </div>
    <div class="content">
    <div class="main">
    <h1>Adobe CQ Data Persist Example</h1>
        <form name="signup" id="signup">
            <table>
                <tr>
                  <td>
                <label for="first" class="label">First Name:</label>
                 </td>
                 <td>
                <input name="first" type="text" id="first">
                 </td>
                </tr>
		<tr>
                  <td>
                <label for="last" class="label">Last Name:</label>
		 </td>
                 <td>	
                <input name="last" type="text" id="last" >
                 </td>
                </tr>
		 <tr>
    		  <td>
   		    <label for="description">Description:</label>
    		   </td>
    		  <td>
    		    <select id="description"  >
            	    <option>Active Customer</option>
            	    <option>Past Customer</option>  
        		</select>
    			</td>
    			</tr>
                  <td> 
                <label for="address" class="label">Address:</label>
                      </td>
                 <td>	
                <input name="address" type="text" id="address">
             </td>
                </tr>
		<tr>
                  <td> 
                <label for="custId" class="label">Customer Id:</label>
                        </td>
                 <td>	
                <input name="custId" type="text" id="custId" readonly="readonly">
          </td>
                </tr>
                      
           	<tr>
                <td></td>
                <td>
                <input type="button" value="Add Customer!"  name="submit" id="submit" value="Submit">
                </td>
                </tr>
            </table>
        </form>
        </div>
    </div>
</div>
</body>
</html>

Modify the templateSQL JSP file

  1. To view the welcome page, enter the URL: http://[host name]:[port] into a web browser. For example, http://localhost:4502.
  2. Select CRXDE Lite.
  3. Double-click apps/sqlpersist/components/page/templateSQL/templateSQL.jsp.
  4. Replace the JSP code with the new code shown in this section.
  5. Click Save All.

Create an Experience Manager web page

The final task is to create a site that contains a page that is based on the templateSQL (the template created earlier in this development article). When the user enters data and submits it, the data is persisted in the MySQL database. The primary key value of the new customer record is displayed in the Customer ID field. 

Cust2

Create an Experience Manager web page that displays the database client:

  1. Go to the welcome page at http://[host name]:[port]; for example, http://localhost:4502.
  2. Select Websites.
  3. From the left hand pane, select Websites.
  4. Select New Page.
  5. Specify the title of the page in the Title field.
  6. Specify the name of the page in the Name field.
  7. Select templateSQL from the template list that appears. This value represents the template that is created in this development article. If you do not see it, then repeat the steps in this development article. For example, if you made a typing mistake when entering in path information, the template will not show up in the New Page dialog box.
  8. Open the new page that you created by double-clicking it in the right pane. The new page opens in a web browser. You should see a page similar to the previous illustration.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy