Spring MVC Menangani Multi Form Submit

PhpMyAdmin memiliki sebuah fitur multiform submit pada menu insert data yang digunakan untuk memasukkan data contoh dalam jumlah yang banyak sekaligus. Fitur tersebut tidak susah untuk dibuat hanya butuh pemahaman tentang dasar form html dan array. Tutorial ini akan membahas pembuatan multiform submit pada aplikasi web menggunakan Spring MVC.

Struktur proyek dari aplikasi yang akan dibuat adalah seperti pada gambar berikut. Saya membuatnya di Netbeans dengan tipe proyek Maven

Aplikasi yang kita buat memiliki minimal 1 form dan maksimal 5 form. Jumlah form yang tersedia bisa dipilih oleh pengguna secara dinamis menggunakan input range pada html. Fitur ini dibuat menggunakan bantuan jQuery seperti terlihat pada gambar dibawah ini

Domain Model

Kita buat sebuah domain model dengan nama kelas Contact, kodenya dapat dilihat sebagai berikut

file : src/main/java/com/agungsetiawan/springmvcmultiform/domain/Contact.java

package com.agungsetiawan.springmvcmultiform.domain;

/**
 *
 * @author awanlabs
 */
public class Contact {
    private String name;
    private String email;
    private String phone;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getPhone() {
        return phone;
    }

    public void setPhone(String phone) {
        this.phone = phone;
    }
    
}

package com.agungsetiawan.springmvcmultiform.domain;

/**

* @author awanlabs

public class Contact {

private String name;

private String email;

private String phone;

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public String getEmail() {

return email;

}

public void setEmail(String email) {

this.email = email;

}

public String getPhone() {

return phone;

}

public void setPhone(String phone) {

this.phone = phone;

}

Kelas diatas hanyalah sebuah kelas Pojo biasa, tidak ada yang istimewa. Selanjutnya buat sebuah kelas domain lagi untuk menampung koleksi dari kelas Contact diatas. Kita perlua membuat sebuah kelas untuk menampung koleksi dari Contact karena nanti aplikasi akan memiliki banyak form. Kita beri nama kelas tersebut sebagai FormContact

file : src/main/java/com/agungsetiawan/springmvcmultiform/domain/FormContact.java

package com.agungsetiawan.springmvcmultiform.domain;

import java.util.List;

/**
 *
 * @author awanlabs
 */
public class FormContact {
    List<Contact> contacts;

    public List<Contact> getContacts() {
        return contacts;
    }

    public void setContacts(List<Contact> contacts) {
        this.contacts = contacts;
    }   
}

package com.agungsetiawan.springmvcmultiform.domain;

import java.util.List;

/**

* @author awanlabs

public class FormContact {

List<Contact> contacts;

public List<Contact> getContacts() {

return contacts;

}

public void setContacts(List<Contact> contacts) {

this.contacts = contacts;

}

Kelas ini juga tidak kalah simpelnya, masih berupa Pojo juga.

Controller dan Jsp

Controller memiliki 2 method. Method pertama untuk menampilkan form input data dan method kedua untuk memproses inputan tadi dan menampilkannya pada sebuah halaman Jsp.
Berikut adalah kode pada controller

file : src/main/java/com/agungsetiawan/springmvcmultiform/controller/HomeController.java

package com.agungsetiawan.springmvcmultiform.controller;

import com.agungsetiawan.springmvcmultiform.domain.Contact;
import com.agungsetiawan.springmvcmultiform.domain.FormContact;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

/**
 *
 * @author awanlabs
 */

@Controller
public class HomeController {
    
    @RequestMapping(value="multiform")
    public String index(Model model){
        model.addAttribute("formContact", new FormContact());
        return "index";
    }
    
    @RequestMapping(value="result",method= RequestMethod.POST)
    public String result(@ModelAttribute("formContact") FormContact formContact,Model model){
        List<Contact> contacts=formContact.getContacts();
        model.addAttribute("contacts", contacts);
        /*Tambahkan misal kode untuk simpan ke basisdata
         * 
         * for(Contact c:contacts){
         *     service.save(c);
         * }
         * 
         */
        return "result";
    }
}

package com.agungsetiawan.springmvcmultiform.controller;

import com.agungsetiawan.springmvcmultiform.domain.Contact;

import com.agungsetiawan.springmvcmultiform.domain.FormContact;

import java.util.List;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.ModelAttribute;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

/**

* @author awanlabs

@Controller

public class HomeController {

@RequestMapping(value="multiform")

public String index(Model model){

model.addAttribute("formContact", new FormContact());

return "index";

}

@RequestMapping(value="result",method= RequestMethod.POST)

public String result(@ModelAttribute("formContact") FormContact formContact,Model model){

List<Contact> contacts=formContact.getContacts();

model.addAttribute("contacts", contacts);

/*Tambahkan misal kode untuk simpan ke basisdata

* for(Contact c:contacts){

* service.save(c);

* }

return "result";

}

Method kedua bisa digunakan untuk memproses inputan lebih lanjut, misal dimasukkan kedalam basisdata. Pada kode diatas sudah saya berikan snippet bagaimana memasukkannya ke dalam basisdata.

Jsp untuk menampilkan form dapat dilihat dibawah ini. Perhatikan bahwa nama variabel pada input text mengacu pada variabel contacts yang berada pada kelas FormContact. Variabel ini berbentuk array sehinggak kita gunakan indeks array yang dimulai dari angka 0.

fie : src/main/webapp/WEB-INF/jsp/index.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <style type="text/css">
            #table{
                margin-bottom: 10px;
                margin-right: 20px;
                float: left;
                border:1px solid chocolate;
                padding: 5px;
            }
            
            #submit{
                clear: both;
            }
            
            h3{
                border-bottom: 1px solid burlywood;
            }
        </style>
        
        <script type="text/javascript" src="<c:url value="/js/jquery-1.7.1.min.js" />"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#quantity").on("change",function(){
                    var quantity=$("#quantity").val();
                    $("#more").html("");
                    for(var i=1;i<=quantity;i++){
                       $("#more").append("<table id=\"table\">\n\
                                           <tr>\n\
                                                <td>Name</td>\n\
                                                <td><input name=\"contacts["+i+"].name\" type=\"text\"/></td>\n\
                                           </tr>\n\
                                           <tr>\n\
                                                <td>Email</td>\n\
                                                <td><input name=\"contacts["+i+"].email\" type=\"text\"/></td>\n\
                                           </tr>\n\
                                           <tr>\n\
                                                <td>Phone</td>\n\
                                                <td><input name=\"contacts["+i+"].phone\" type=\"text\"/></td>\n\
                                           </tr>\n\
                                          </table>");
                    }
                });
            });
        </script>
        <title>Multi Form Submit</title>
    </head>
    <body>
        <div id="content">
         <h3>Registration</h3>
            <form:form method="post" action="/result" modelAttribute="formContact">
                <table id="table">
                    <tr>
                        <td>Name</td>
                        <td><input name="contacts[0].name" tpe="text"/></td>
                    </tr>
                    <tr>
                        <td>Email</td>
                        <td><input name="contacts[0].email" tpe="text"/></td>
                    </tr>
                    <tr>
                        <td>Phone</td>
                        <td><input name="contacts[0].phone" tpe="text"/></td>
                    </tr>
                </table>
                
                <div id="more"></div>
                <div id="submit">
                    <input type="submit" value="Post"/>
                </div>
            </form:form>
            <input type="range" name="quantity" id="quantity" min="0" max="4" value="0"/>
        </div>        
    </body>
</html>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

#table{

margin-bottom: 10px;

margin-right: 20px;

float: left;

border:1px solid chocolate;

padding: 5px;

}

#submit{

clear: both;

}

h3{

border-bottom: 1px solid burlywood;

}

</style>

$(document).ready(function(){

$("#quantity").on("change",function(){

var quantity=$("#quantity").val();

$("#more").html("");

for(var i=1;i<=quantity;i++){

$("#more").append("<table id=\"table\">\n\

<tr>\n\

<td>Name</td>\n\

<td><input name=\"contacts["+i+"].name\" type=\"text\"/></td>\n\

</tr>\n\

<tr>\n\

<td>Email</td>\n\

<td><input name=\"contacts["+i+"].email\" type=\"text\"/></td>\n\

</tr>\n\

<tr>\n\

<td>Phone</td>\n\

<td><input name=\"contacts["+i+"].phone\" type=\"text\"/></td>\n\

</tr>\n\

</table>");

}

});

</script>

<title>Multi Form Submit</title>

</head>

<body>

<h3>Registration</h3>

<form:form method="post" action="/result" modelAttribute="formContact">

<tr>

</tr>

<tr>

<td>Email</td>

</tr>

<tr>

<td>Phone</td>

</tr>

</table>

</div>

</form:form>

</div>

</body>

</html>

Halaman yang berfungsi menampilkan hasil input dari form diatas kita buat sederhana saja seperti pada kode dibawah ini

fie : src/main/webapp/WEB-INF/jsp/result.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="windows-1252"%>
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body{
                font-family: verdana;
            }
            
            h3{
                margin-bottom: 8px;
                border-bottom: 1px solid bisque;
            }
            .result{
                margin-bottom: 15px;
                border: 1px solid burlywood;
                padding: 5px 10px;
                width: 200px;
            }
            
            p{
                margin: 0px;
            }
        </style>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
        <title>JSP Page</title>
    </head>
    <body>
        <h3>Result</h3>
        <div id="content">
            <c:forEach items="${contacts}" var="contact">
                <div class="result">
                    <p>${contact.name}</p>
                    <p>${contact.email}</p>
                    <p>${contact.phone}</p>
                </div>
            </c:forEach>
        </div>
    </body>
</html>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@page contentType="text/html" pageEncoding="windows-1252"%>

<!DOCTYPE html>

<html>

<head>

body{

font-family: verdana;

}

h3{

margin-bottom: 8px;

border-bottom: 1px solid bisque;

}

.result{

margin-bottom: 15px;

border: 1px solid burlywood;

padding: 5px 10px;

width: 200px;

}

margin: 0px;

}

</style>

</head>

<body>

<h3>Result</h3>

<c:forEach items="${contacts}" var="contact">

<p>${contact.name}</p>

<p>${contact.email}</p>

<p>${contact.phone}</p>

</div>

</c:forEach>

</div>

</body>

</html>

Konfigurasi

Jangan lupa untuk membuat kelas konfigurasi supaya proyek yang kita buat bisa dijalankan. Konfigurasi pertama adalah bertindak sebagai Spring Context sedangkan yang kedua sebagai initializer.

file : src/main/java/com/agungsetiawan/springmvcmultiform/ApplicationContext.java

package com.agungsetiawan.springmvcmultiform.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.web.servlet.view.InternalResourceViewResolver;

/**
 *
 * @author awanlabs
 */
@Configuration
@EnableWebMvc
@ComponentScan("com.agungsetiawan.springmvcmultiform")

public class ApplicationContext extends WebMvcConfigurerAdapter{
    
    @Bean
    public InternalResourceViewResolver internalResourceViewResolver(){
        InternalResourceViewResolver resolver=new InternalResourceViewResolver();
        resolver.setPrefix("/WEB-INF/jsp/");
        resolver.setSuffix(".jsp");
        return resolver;
    }
    
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/js/**").addResourceLocations("/js/");
    }
}

package com.agungsetiawan.springmvcmultiform.config;

import org.springframework.context.annotation.Bean;

import org.springframework.context.annotation.ComponentScan;

import org.springframework.context.annotation.Configuration;

import org.springframework.web.servlet.config.annotation.EnableWebMvc;

import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;

import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

import org.springframework.web.servlet.view.InternalResourceViewResolver;

/**

* @author awanlabs

@Configuration

@EnableWebMvc

@ComponentScan("com.agungsetiawan.springmvcmultiform")

public class ApplicationContext extends WebMvcConfigurerAdapter{

@Bean

public InternalResourceViewResolver internalResourceViewResolver(){

InternalResourceViewResolver resolver=new InternalResourceViewResolver();

resolver.setPrefix("/WEB-INF/jsp/");

resolver.setSuffix(".jsp");

return resolver;

}

@Override

public void addResourceHandlers(ResourceHandlerRegistry registry) {

registry.addResourceHandler("/js/**").addResourceLocations("/js/");

}

file : src/main/java/com/agungsetiawan/springmvcmultiform/Initializer.java

package com.agungsetiawan.springmvcmultiform.config;

import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.ServletRegistration.Dynamic;
import org.springframework.web.WebApplicationInitializer;
import org.springframework.web.context.support.AnnotationConfigWebApplicationContext;
import org.springframework.web.servlet.DispatcherServlet;

/**
 *
 * @author awanlabs
 */
public class Initializer implements WebApplicationInitializer {

    @Override
    public void onStartup(ServletContext sc) throws ServletException {
         AnnotationConfigWebApplicationContext context=new AnnotationConfigWebApplicationContext();
        context.register(ApplicationContext.class);
        context.setServletContext(sc);
        Dynamic servlet=sc.addServlet("dispatcher", new DispatcherServlet(context));
        servlet.addMapping("/");
        servlet.setLoadOnStartup(1);
    }   
}

package com.agungsetiawan.springmvcmultiform.config;

import javax.servlet.ServletContext;

import javax.servlet.ServletException;

import javax.servlet.ServletRegistration.Dynamic;

import org.springframework.web.WebApplicationInitializer;

import org.springframework.web.context.support.AnnotationConfigWebApplicationContext;

import org.springframework.web.servlet.DispatcherServlet;

/**

* @author awanlabs

public class Initializer implements WebApplicationInitializer {

@Override

public void onStartup(ServletContext sc) throws ServletException {

AnnotationConfigWebApplicationContext context=new AnnotationConfigWebApplicationContext();

context.register(ApplicationContext.class);

context.setServletContext(sc);

Dynamic servlet=sc.addServlet("dispatcher", new DispatcherServlet(context));

servlet.addMapping("/");

servlet.setLoadOnStartup(1);

}

Running dan Screenshot

Source Code

Source Code contoh proyek pada tulisan ini dapat diakses pada repositori saya di Github.
https://github.com/blinkawan/SpringMvcMultiForm

Facebook Comments

Agung Setiawan

Software Engineer

Spring MVC Menangani Multi Form Submit

Domain Model

Controller dan Jsp

Konfigurasi

Running dan Screenshot

Source Code

Leave a Reply Cancel reply