January 2011 Posts

[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, :-[

Google+

[Tutorial] Belajar ZKoss Yuu…

Karena kebutuhan project yang mengharuskan gw bikin aplikasi RIA yang jalan diatas browser, gw terpaksa cari-cari framework AJAX yang cepet jadinya dan bagus tampilannya. ZKoss adalah pilihan pertama gw, kebetulan background gw Java jadinya ga terlalu sulit codingin si ZKoss ini.

Disini gw akan coba bikin aplikasi CRUD sederhana banget, antara ZKoss sebagai UI-nya, MySQL sebagai databasenya dan Hibernate buat menghubungkan keduanya. IDE yg gw pakek adalah Netbeans dan Webserver gw Apache Tomcat.

Kita mulai dengan struktur database gw,
nama database “test”, nama table “person”.

CREATE TABLE person
(
        name VARCHAR(20) NOT NULL,
        gender VARCHAR(10),
        birthdate DATE,
        age INT,
        PRIMARY KEY (name)
)

insert into person (name, gender, birthdate, age) values ('Christian Gonzales', 'Male', '1988-12-24', 29);
insert into person (name, gender, birthdate, age) values ('Firman Utina', 'Male', '1977-11-20', 28);
insert into person (name, gender, birthdate, age) values ('Irfan Bachdim', 'Male', '1990-01-01', 19);
insert into person (name, gender, birthdate, age) values ('Julia Perez', 'Female', '1966-04-18', 64);

Kemudian javabean dan hibernate xml-nya.

package com.baculsoft.zk.bean;

import java.util.Date;

public class Person {
    
    private String name;
    private int age;
    private String gender;
    private Date birthdate;

    public Person(String name, int age, String gender, Date birthdate) {
        this.name = name;
        this.age = age;
        this.gender = gender;
        this.birthdate = birthdate;
    }

    public Person() {
    }    

    // other setter getter

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN" "http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">
<hibernate-mapping>
  <class catalog="test" name="com.baculsoft.zk.bean.Person" table="person">
    <id name="name" type="string">
      <column length="20" name="name"/>
      <generator class="assigned"/>
    </id>
    <property name="gender" type="string">
      <column length="10" name="gender"/>
    </property>
    <property name="birthdate" type="date">
      <column length="10" name="birthdate"/>
    </property>
    <property name="age" type="java.lang.Integer">
      <column name="age"/>
    </property>
  </class>
</hibernate-mapping>

Jangan sampe lupa settingan hibernate.cfg.xml-nya yeh.

<?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>
    <property name="hibernate.show_sql">true</property>
    <mapping resource="com/baculsoft/zk/bean/Person.hbm.xml"/>
  </session-factory>
</hibernate-configuration>

abis itu gw bikin class PersonDAO buat handle transaksi ke db

package com.baculsoft.zk.dao;

import com.baculsoft.zk.bean.Person;
import java.util.List;
import org.hibernate.Session;

// disini pake hibernate util bawaan zkoss
import org.zkoss.zkplus.hibernate.HibernateUtil;

public class PersonDAO {

    public List<Person> findAll() throws Exception {
        Session session = HibernateUtil.getSessionFactory().openSession();
        return (List<Person>) session.createCriteria(Person.class).list();
    }

    public boolean delete(Person person) throws Exception {
        if (person == null) {
            throw new Exception("empty person");
        }
        Session session = HibernateUtil.getSessionFactory().openSession();
        session.delete(person);
        session.flush();
        session.close();
        return true;
    }

    public boolean insert(Person person) throws Exception {
        if (person == null) {
            throw new Exception("empty person");
        }
        Session session = HibernateUtil.getSessionFactory().openSession();
        session.save(person);
        session.flush();
        session.close();
        return true;
    }

    public boolean update(Person person) throws Exception {
        if (person == null) {
            throw new Exception("empty person");
        }
        Session session = HibernateUtil.getSessionFactory().openSession();
        session.update(person);
        session.flush();
        session.close();
        return true;
    }
}

nah, ini class Service adalah salah satu class yang paling diperlukan, coba cek baris ke 34, 43 dan 51. Itu method2 jadi semacem “listener” buat “event” yang terjadi di aplikasi.

package com.baculsoft.zk.service;

import com.baculsoft.zk.bean.Person;
import com.baculsoft.zk.dao.PersonDAO;
import java.util.List;
import org.apache.log4j.Logger;
import org.zkoss.zk.ui.util.GenericForwardComposer;

public class PersonService extends GenericForwardComposer {

    private PersonDAO dao = new PersonDAO();
    private Person person = new Person();
    
    private Logger logger = Logger.getLogger(PersonService.class);

    public Person getCurrent() {
        return person;
    }

    public void setCurrent(Person person) {
        this.person = person;
    }

    public List<Person> getAllPersons() {
        try {
            return dao.findAll();
        } catch (Exception ex) {
            logger.error(ex.getMessage(), ex);
            return null;
        }

    }

    public void onClick$add() {
        try {
            Person nowPerson = new Person(person.getName(), person.getAge(), person.getGender(), person.getBirthdate());
            dao.insert(nowPerson);
        } catch (Exception ex) {
            logger.error(ex.getMessage(), ex);
        }
    }

    public void onClick$update() {
        try {
            dao.update(person);
        } catch (Exception ex) {
            logger.error(ex.getMessage(), ex);
        }
    }

    public void onClick$delete() {
        try {
            dao.delete(person);
        } catch (Exception ex) {
            logger.error(ex.getMessage(), ex);
        }
    }
}

berikut ini adalah yang terpenting dari si aplikasi zkoss, yaitu UI-nya. Gw kasih nama “index.zul” (extension .zul bisa diganti sesuka loe di dalem web.xml). Perhatikan baris ke 34, 35 dan 36. Id-nya button harus sama dengan nama method di class PersonService. Dibaris ke 3 adalah class yang didaftarkan sebagai listener.

<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?>
<window id="win" width="900px" title="Person" border="normal" 
    apply="com.baculsoft.zk.service.PersonService">
    <listbox id="box" multiple="true" rows="5"
        model="@{win$composer.allPersons, load-after='add.onClick, delete.onClick, update.onClick'}"
        selectedItem="@{win$composer.current}">

        <listhead>
            <listheader label="Name" sort="auto(name)"/>
            <listheader label="Age" width="80px" sort="auto(age)" />
            <listheader label="Gender" width="170px" sort="auto(gender)" />
            <listheader label="Birthdate" width="170px" sort="auto(birthdate)" />
        </listhead>

        <listitem self="@{each='person'}" value="@{person}">
            <listcell label="@{person.name}"/>
            <listcell label="@{person.age}"/>
            <listcell label="@{person.gender}"/>
            <listcell label="@{person.birthdate}"/>
        </listitem>

    </listbox>

    <groupbox>
        <caption label="Person" />
        Name: <textbox id="name" cols="25" value="@{win$composer.current.name}" />
        Age: <intbox id="age" cols="1" value="@{win$composer.current.age}" />
        Gender: <combobox id="gender" value="@{win$composer.current.gender}">
                    <comboitem label="Male" description="Alpha Male"/>
                    <comboitem label="Female" description="Girl Power"/>
                    <comboitem label="Others" description="WTF..?!?!"/>
                </combobox>
        Birthdate: <datebox id="birthdate" cols="8" value="@{win$composer.current.birthdate}" />
        <button id="add" label="Add" height="24px"/>
        <button id="update" label="Update" height="24px"/>
        <button id="delete" label="Delete" height="24px"/>
    </groupbox>
</window>

last but not least, komponen terpenting dari aplikasi gw, yaitu web.xml.

<?xml version="1.0" encoding="UTF-8"?>

<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

    <description><![CDATA[Edw's ZK Application]]></description>
    <display-name>ZKossTest</display-name>

    <listener>
        <description>ZK listener for session cleanup</description>
        <listener-class>org.zkoss.zk.ui.http.HttpSessionListener</listener-class>
    </listener>
    <servlet>
        <description>ZK loader for ZUML pages</description>
        <servlet-name>zkLoader</servlet-name>
        <servlet-class>org.zkoss.zk.ui.http.DHtmlLayoutServlet</servlet-class>

        <init-param>
            <param-name>update-uri</param-name>
            <param-value>/zkau</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>zkLoader</servlet-name>
        <url-pattern>*.zul</url-pattern>
    </servlet-mapping>

    <servlet>
        <description>The asynchronous update engine for ZK</description>
        <servlet-name>auEngine</servlet-name>
        <servlet-class>org.zkoss.zk.au.http.DHtmlUpdateServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>auEngine</servlet-name>
        <url-pattern>/zkau/*</url-pattern>
    </servlet-mapping>

    <welcome-file-list>
        <welcome-file>index.zul</welcome-file>
    </welcome-file-list>
</web-app>

nanti kalo berhasil dijalankan akan tampil seperti ini di browser,

Berikut adalah struktur project netbeans gw, btw untuk library ZKoss dan Hibernate bisa di download dari web masing-masing.


Btw, contoh project gw bisa di download disini. Ternyata ZKoss ngga terlalu susah kan? (*)

Google+

Happy Birthday, Me..!!!

It’s my birthday today, Look what I’ve got!

What a wonderfull gifts, thanks (*)

Google+

[Tutorial] Upload File atau Image Dengan JSP

Beberapa hari terakhir di forum programmer Kaskus lagi rame pertanyaan tentang caranya upload file pakek JSP. Daripada pusing-pusing mendingan gw pake library bawaan apache, yaitu Apache Commons FileUpload.

Aplikasi sederhana ini terdiri dari 1 buah JSP sebagai presentation layer dan 1 Servlet buat handle uploading file-nya. Konsep-nya sederhana, semua file yang keupload akan disimpan didalam folder /image yang terletak 1 folder dengan file index.jsp.

Oke, langsung kita mulai kalo gitu. Ini file index.jsp gw,

<!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">
        <title>JSP Page</title>
    </head>
    <body>
        <h1>Hello World!</h1>
        <form action="upload" method="POST" enctype="multipart/form-data">
            Select file : <input type="file" name="fileSelect" />
            <br />
            <input type="submit" />
        </form>
    </body>
</html>

dan ini servlet buat handle upload file ataupun image,

package com.baculsoft.servlet;

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;

public class UploadServlet extends HttpServlet {

    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();

        // get your absolute path
        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 upload = new ServletFileUpload(new DiskFileItemFactory());

                // parse requests
                List<FileItem> fileItems = upload.parseRequest(request);

                // Process the uploaded items
                for (FileItem fileItem : fileItems) {
                    // a regular form field
                    if (fileItem.isFormField()) {
                        
                    }
                    // 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>");

                    }
                }
            }
        } catch (Exception ex) {
            ex.printStackTrace();
        } 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);
    }
}

abis itu gw register servlet gw di web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
    <servlet>
        <servlet-name>upload</servlet-name>
        <servlet-class>com.baculsoft.servlet.UploadServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>upload</servlet-name>
        <url-pattern>/upload</url-pattern>
    </servlet-mapping>
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
</web-app>

ini struktur project gw di Netbeans.

Nah gampang kan ;-)

nb.
untuk tutorial lebih lengkapnya bisa dicek disini

Google+