Getting Started: Handling Form Data

Learn how to create a HTML form that uses the HTTP POST method to submit user-provided data to a Java Servlet running on App Engine.

Before you begin

Configure your development environment and create your App Engine project.

Creating a form

Create a HTML form using JavaServer Pages (JSP).

The following JSP code generates a form to create a blog post. It takes three text input fields, title, author and content and has a Save button that submits the data to the servlet:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<div class="container">
  <h2>
    Create a new blog post
  </h2>

  <form method="POST" action="/create">

    <div>
      <label for="title">Title</label>
      <input type="text" name="title" id="title" size="40" value="${fn:escapeXml(blog.title)}" class="form-control" />
    </div>

    <div>
      <label for="author">Author</label>
      <input type="text" name="author" id="author" size="40" value="${fn:escapeXml(blog.author)}" class="form-control" />
    </div>

    <div>
      <label for="description">Post content</label>
      <textarea name="description" id="description" rows="10" cols="50" class="form-control">${fn:escapeXml(blog.content)}</textarea>
    </div>

    <button type="submit">Save</button>
  </form>
</div>

This form sends the form data to the handler at the /create URL. You should use JSP's escapeXml functionality to counter cross-site scripting (XSS) attacks, as shown in the code snippet. Instructions for creating the form handler are shown next.

Handling form data

Once the user submits the form data, it is handled by a form handler. In the snippet below, the form handler is a servlet named createBlogPost:

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.annotation.WebServlet;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@SuppressWarnings("serial")
@WebServlet(name = "createBlogPost", value="/create")
public class createBlogPost extends HttpServlet {

  @Override
  public void doPost(HttpServletRequest req, HttpServletResponse resp)
      throws ServletException, IOException {

    PrintWriter out = resp.getWriter();

    out.println(
        "Article with the title: " + req.getParameter("title") + " by "
            + req.getParameter("author") + " and the content: "
            + req.getParameter("description") + " added.");
  }
}

Note the annotation @WebServlet(name = "createBlogPost", value="/create"), which maps the servlet to the URI where it handles requests: /create. For developers familiar with the App Engine Java 7 runtime, this annotation replaces the mappings that were previously made in the web.xml file.

Deploying to App Engine

You can deploy your app to App Engine using Maven.

Go to the root directory of your project and type:

mvn package appengine:deploy -Dapp.deploy.projectId=PROJECT_ID

Replace PROJECT_ID with the ID of your Google Cloud project. If your pom.xml file already specifies your project ID, you don't need to include the -Dapp.deploy.projectId property in the command you run.

After Maven deploys your app, open a web browser tab automatically at your new app by typing:

gcloud app browse

What's next

As an extension of handling user data, you might want to use Cloud SQL, Cloud Datastore, or Cloud Storage to store the data:

• Cloud SQL on App Engine