[Tutorial] Upload File dan Isi Form Sederhana ke Database dengan JSP
Karena banyak pertanyaan terkait insert isi form ke database dan upload image / file ke server, akhirnya gw memutuskan untuk nulis ini di blog gw, kali aja suatu saat ada yang nanya lagi.
Disini gw bikin aplikasi sederhana dengan 1 input text dan 1 input untuk upload file, semua yang diinput akan masuk ke database. Khusus untuk si file akan masuk path relatifnya (image/NamaImageYangDiUpload). Gw pakek library apache commons fileupload, commons io dan Hibernate framework (pake query sql biasa juga bisa tapi gw males aja, ahhahaaa).
oke langsung aja, gw bikin table sederhana banget,
CREATE TABLE upload
(
id INT NOT NULL AUTO_INCREMENT,
uploadBy VARCHAR(20) NOT NULL,
imagePath VARCHAR(200) NOT NULL,
PRIMARY KEY (id)
)
java bean ma hbm.xml-nya
package com.baculsoft.bean;
public class Upload implements java.io.Serializable {
private Integer id;
private String uploadBy;
private String imagePath;
public Upload() {
}
public Upload(String uploadBy, String imagePath) {
this.uploadBy = uploadBy;
this.imagePath = imagePath;
}
// other setter and getter
@Override
public String toString() {
return "Upload{" + "id=" + id + " uploadBy=" + uploadBy + " imagePath=" + imagePath + '}';
}
}
<?xml version="1.0"?>
<!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN"
"http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">
<hibernate-mapping>
<class name="com.baculsoft.bean.Upload" table="upload" catalog="test">
<id name="id" type="java.lang.Integer">
<column name="id" />
<generator class="identity" />
</id>
<property name="uploadBy" type="string">
<column name="uploadBy" length="20" not-null="true" />
</property>
<property name="imagePath" type="string">
<column name="imagePath" length="50" not-null="true" />
</property>
</class>
</hibernate-mapping>
lalu hibernate.cfg.xml buat handle koneksi ke database
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE hibernate-configuration PUBLIC "-//Hibernate/Hibernate Configuration DTD 3.0//EN" "http://hibernate.sourceforge.net/hibernate-configuration-3.0.dtd">
<hibernate-configuration>
<session-factory>
<property name="hibernate.dialect">org.hibernate.dialect.MySQLDialect</property>
<property name="hibernate.connection.driver_class">com.mysql.jdbc.Driver</property>
<property name="hibernate.connection.url">jdbc:mysql://localhost:3306/test</property>
<property name="hibernate.connection.username">root</property>
<property name="hibernate.connection.password">password</property>
<property name="hibernate.connection.autocommit">true</property>
<mapping resource="com/baculsoft/bean/Upload.hbm.xml"/>
</session-factory>
</hibernate-configuration>
dan file java buat ngeload hibernate.cfg.xml
package com.baculsoft.hbm;
import org.hibernate.cfg.AnnotationConfiguration;
import org.hibernate.SessionFactory;
/**
* Hibernate Utility class with a convenient method to get Session Factory object.
*
* @author edw
*/
public class HiberUtil {
private static final SessionFactory sessionFactory;
static {
try {
// Create the SessionFactory from standard (hibernate.cfg.xml)
// config file.
sessionFactory = new AnnotationConfiguration().configure().buildSessionFactory();
} catch (Throwable ex) {
// Log the exception.
System.err.println("Initial SessionFactory creation failed." + ex);
throw new ExceptionInInitializerError(ex);
}
}
public static SessionFactory getSessionFactory() {
return sessionFactory;
}
}
nah ini adalah JSP gw, coba perhatiin kalo gw punya 2 input type. 1 buat input dengan type text 1 lagi buat input type file.
<%--
Document : index
Created on : Jan 2, 2011, 9:34:34 PM
Author : edw
--%>
<%@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>
<title>JSP Page</title>
</head>
<body>
<h1>Hello World!</h1>
<form action="upload" method="POST" enctype="multipart/form-data">
Input Your Name : <input type="text" name="uploadBy" />
<br />
Select file : <input type="file" name="fileSelect" />
<br />
<input type="submit" />
</form>
</body>
</html>
nah, yang rada ribet ada disini. Ini adalah servlet yg gw bikin khusus buat handle transfer file dari client ke server dan save path+nama file tersebut ke database. Method yg gw gunakan untuk insert ke database ada di line 90.
package com.baculsoft.servlet;
import com.baculsoft.bean.Upload;
import com.baculsoft.hbm.HiberUtil;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.log4j.Logger;
import org.hibernate.Session;
public class UploadServlet extends HttpServlet {
private Logger logger = Logger.getLogger(UploadServlet.class);
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String uploadTo = getServletContext().getRealPath("/") + "image/";
try {
boolean isMultipart = ServletFileUpload.isMultipartContent(request);
// no multipart form
if (!isMultipart) {
out.println("<html>");
out.println("<head>");
out.println("<title>Servlet UploadServlet</title>");
out.println("</head>");
out.println("<body>");
out.println("<h1>No Multipart Files</h1>");
out.println("</body>");
out.println("</html>");
}
// multipart form
else {
// Create a new file upload handler
ServletFileUpload servletFileUpload = new ServletFileUpload(new DiskFileItemFactory());
// parse requests
List<FileItem> fileItems = servletFileUpload.parseRequest(request);
// open session factory
Session session = HiberUtil.getSessionFactory().openSession();
// prepare upload bean
Upload upload = new Upload();
// Process the uploaded items
for (FileItem fileItem : fileItems) {
// a regular form field
if (fileItem.isFormField()) {
// disini sama dengan nama input text field di index.jsp yaitu "uploadBy"
if(fileItem.getFieldName().equalsIgnoreCase("uploadBy")){
upload.setUploadBy(fileItem.getString());
}
}
// upload field
else {
String fileName = fileItem.getName();
File fileTo = new File(uploadTo + fileName);
fileItem.write(fileTo);
out.println("<html>");
out.println("<head>");
out.println("<title>Servlet UploadServlet</title>");
out.println("</head>");
out.println("<body>");
out.println("<h1> success write to " + fileTo.getAbsolutePath() + "</h1>");
out.println("</body>");
out.println("</html>");
// set uploaded file's location
upload.setImagePath("image/"+fileName);
}
}
session.save(upload);
session.flush();
session.close();
logger.debug("success");
}
} catch (Exception ex) {
logger.error(ex.getMessage(), ex);
} finally {
out.close();
}
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
}
berikut adalah log4j.properties gw
# Global logging configuration
log4j.rootLogger=DEBUG,stdout
# Console output...
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%d [%c{1}] %-5p %c:%L - %m%n
ini struktur project netbeans gw,
ini lib yg gw pakek
File yang berhasil terupload akan disimpan di folder image/. Disini gw coba upload 2 kali.
dan ini isi database gw
Silahkan dicoba masing-masing yeh, :-[
