Memulai: Menangani Data Formulir

Pelajari cara membuat formulir HTML yang menggunakan metode POST HTTP untuk mengirimkan data yang disediakan pengguna ke Java Servlet yang berjalan di App Engine.

Sebelum memulai

Mengonfigurasi lingkungan pengembangan dan membuat project App Engine.

Membuat formulir

Buat formulir HTML menggunakan JavaServer Pages (JSP).

Kode JSP berikut membuat formulir untuk membuat postingan blog. Dibutuhkan tiga kolom input teks, title, author, dan content serta memiliki tombol Save yang mengirimkan data ke 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>

Formulir ini mengirim data formulir ke pengendali di URL /create. Anda harus menggunakan fungsi escapeXml JSP untuk melawan serangan pembuatan skrip lintas situs (XSS), seperti yang ditunjukkan dalam cuplikan kode. Petunjuk untuk membuat pengendali formulir akan ditampilkan berikutnya.

Menangani data formulir

Setelah pengguna mengirimkan data formulir, data tersebut akan ditangani oleh pengendali formulir. Dalam cuplikan di bawah ini, pengendali formulir adalah servlet bernama 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.");
  }
}

Perhatikan anotasi @WebServlet(name = "createBlogPost", value="/create"), yang memetakan servlet ke URI tempat servlet menangani permintaan: /create. Untuk developer yang memahami runtime App Engine Java 7, anotasi ini menggantikan pemetaan yang sebelumnya dibuat dalam file web.xml.

Men-deploy ke App Engine

Anda dapat men-deploy aplikasi ke App Engine menggunakan Maven.

Buka direktori root project Anda dan ketik:

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

Ganti PROJECT_ID dengan ID project Google Cloud Anda. Jika file pom.xml sudah menentukan ID project, Anda tidak perlu menyertakan properti -Dapp.deploy.projectId dalam perintah yang dijalankan.

Setelah Maven men-deploy aplikasi Anda, buka tab browser web secara otomatis di aplikasi baru dengan mengetik:

gcloud app browse

Langkah selanjutnya

Sebagai ekstensi untuk menangani data pengguna, Anda dapat menggunakan Cloud SQL, Cloud Datastore, atau Cloud Storage untuk menyimpan data:

• Cloud SQL di App Engine