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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
<%@ 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> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<%@ 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> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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