Dian Aditya

Penjahit Digital.

Menggunakan Method POST, GET, PUT, DELETE Pada HTML Form Tag, Bisakah?

Pernahkah anda menggunakan menggunakan http method selain GET dan POST pada browser. Yah, tentunya hanya hanya client seperti apache http client yang mensupport http request method seperti PUT, DELETE, ataupun OPTION. Sebenarnya saat ini hampir seluruh browser sudah dapat mengirimkan request dengan menggunakan http method tersebut melalui XMLHttpRequest, yap kuncinya ada di AJAX. Lalu bagaimana dengan html form tag?

1

 <form method="PUT"></form>

Sayangnya semua browser hanya mendukung POST dan GET untuk request pada form tag, jadi ilustrasi yang saya tulis diatas tidak dapat diimplementasikan. Lalu? Tunggu dulu, buat anda yang sudah main-main dengan Yama, semuanya bisa jadi mungkin. Saya akan memberikan sedikit contoh bagaimana method selain POST dan GET bisa dikirimkan ke server melalui browser, menggunakan form tag tentunya.

Sebagai pemanasan saya mulai dengan membuat sebuah proyek Yama.

1
2
3
4
5
6

mvn archetype:generate \
 -DarchetypeGroupId=org.meruvian.yama \
-DarchetypeArtifactId=yama-struts-archetype \
-DarchetypeVersion=1.0.2 \
-DgroupId=com.example.yama \
-DartifactId=my-first-yama

Oke kemudian saya akan membuat dua buah file jsp dibawah /src/main/webapp/WEB-INF/test, satu untuk mengirim request dan yang satunya lagi untuk menerima hasil request.

index.jsp

1
2
3

<form method="delete" action="/test">
 <input type="submit" value="Test http method!" class="btn" />
</form>

success.jsp

1

Http method : <%= request.getMethod() %>

Kemudian saya buat action class. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

package com.example.yama.action;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.meruvian.inca.struts2.rest.ActionResult;
import org.meruvian.inca.struts2.rest.annotation.Action;
import org.meruvian.inca.struts2.rest.annotation.Action.HttpMethod;

@Action(name = "/")
public class TestAction {
private static final Log LOG = LogFactory.getLog(TestAction.class);

  @Action(name = "/test", method = HttpMethod.GET)
  public ActionResult index() {
    return new ActionResult("/WEB-INF/test/index.jsp");
  }

  @Action(name = "/test", method = HttpMethod.DELETE)
  public ActionResult delete() {
    LOG.debug("Method delete executed!");
    return new ActionResult("/WEB-INF/test/success.jsp");
  }
}

Dan yang terakhir saya tambahkan link menu dengan mengedit file menu.ftl pada /src/main/webapp/view

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<li class="active">
  <a href="<@s.url value=&quot;/home&quot; />">
    <i class="icon-home icon-white"></i> Home
  </a>
</li>
<#if request.session.getAttribute("SPRING_SECURITY_CONTEXT")??>
<!-- Menu yang harus ditambahkan -->
<li>
  <a href="#/test">Test HTTP Method</a>
</li>
<!-- End of menu yang harus ditambahkan -->
<li>
  <a href="<@s.url value="logout" />"></a>
  <@s.text name="frontent.logout.text" />
</li>
<!--#if-->

Selanjutnya saya akan coba jalankan menggunakan jetty. mvn jetty:run

Request:

Request

Response:

Response

Secara teknis Yama menghandle setiap request pada tag form, kemudian mengkonversinya menjadi AJAX request. Jadi kita tidak perlu lagi membuat kode javascript untuk mengirimkan AJAX request.

Comments