Mengupload file ke server menggunakan ZKoss Framework

Kali ini kita akan membuat sebuah projek, dimana didalamnya ada fitur untuk mengupload sebuah document, document ini bisa berupa image ataupun format file lainya.

Pertama buat projek zk baru, jika anda belum tau caranya bisa lihat disini.
kedua pada index.zul isikan code seperti ini,

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

<zk xmlns="http://www.zkoss.org/2005/zul">
    <window title="Contoh Upload File ZK" apply="controller.indexComposer">
        <button id="uploadBtn" label="Upload file" />
        <separator />
        <image width ="300px" height="300px" id="img" />
        <separator />
        <label id="msgLb" />
    </window>
</zk>

Ketiga buat file controllernya yaitu file indexController.java, sebelumnya buat sebuah folder bernama "controller" di /src/java/
untuk lebih jelasnya hirarki projeknya seperti ini

Hirarki projek

berikut code indexcontroller.java

package controller;

import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.text.SimpleDateFormat;
import java.util.Date;
import org.zkoss.util.media.Media;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.*;

/**
 *
 * @author yusuf
 */
public class indexComposer extends GenericForwardComposer {

    private Image img;
    private Label msgLb;
    private static final int FILE_SIZE = 1000;// 100k
    private static final String xdate = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
    private static final String SAVE_PATH = "/home/yusuf/Documents/upload/" + xdate + "/";
//   private static final String SAVE_PATH = "c:\\myfile\\media\\" + xdate + "/"; //ganti jika windows

    @Override
    public void doAfterCompose(Component comp) throws Exception {
        super.doAfterCompose(comp);
    }

    public void onClick$uploadBtn() {
        msgLb.setValue("");

        Media media = Fileupload.get();
        if (media == null) {
            msgLb.setValue("please select a file");
            return;
        }
        String type = media.getContentType().split("/")[0];
        if (type.equals("image")) {
            if (media.getByteData().length > FILE_SIZE * 1024) {
                msgLb.setValue("File size limit " + FILE_SIZE + "k");
                return;
            }
            org.zkoss.image.Image picture = (org.zkoss.image.Image) media;
            img.setContent(picture);
        }
        saveFile(media);
    }

    private void saveFile(Media media) {
        BufferedInputStream in = null;
        BufferedOutputStream out = null;
        try {
            InputStream fin = media.getStreamData();
            in = new BufferedInputStream(fin);
            File baseDir = new File(SAVE_PATH);

            if (!baseDir.exists()) {
                baseDir.mkdirs();
            }
            File file = new File(SAVE_PATH + media.getName());
            OutputStream fout = new FileOutputStream(file);
            out = new BufferedOutputStream(fout);
            byte buffer[] = new byte[1024];
            int ch = in.read(buffer);
            while (ch != -1) {
                out.write(buffer, 0, ch);
                ch = in.read(buffer);
            }
            msgLb.setValue("sucessed upload :" + media.getName());
        } catch (IOException e) {
            throw new RuntimeException(e);
        } catch (Exception e) {
            throw new RuntimeException(e);
        } finally {
            try {
                if (out != null) {
                    out.close();
                }
                if (in != null) {
                    in.close();
                }
            } catch (IOException e) {
                throw new RuntimeException(e);
            }
        }

    }

}

Selanjutnya pada zul.xml tambahkan script berikut

<system-config>
<ui-factory-class>org.zkoss.zk.ui.http.SerializableUiFactory</ui-factory-class>
</system-config>

Penjelasan

upload file menggukanak zkoss

Pada bagian ini, kita mendefinisikan
1. file_size adalah Berapa max file yang diperbolehkan diupload,
2. save_path adalah direktori yang akan digunakan untuk penyimpanan file, jika direktori yang didefinisikan belum ada, maka secara otomatis system akan membuat foldernya di laptop/pc anda.

upload file menggukanak zkoss

Pada bagian ini, kita mendefinisikan hal apa saja yang akan terjadi ketika menekan tombol upload.
didalamnya ada validasi file size, kemudia ada validasi apakah file yang kita upload image atau bukan, kalau image maka akan ditampilkan di index.zul. di bagian ini juga kita memanggil fungsi simpan file.

upload file menggukanak zkoss

Pada bagian ini sistem kan menyimpan file yang kita upload.

Cukup sekian blog saya kali ini, anda bisa mendownload projek ini di github saya disini.
Apabila ada yang ingin ditanyakan silahkan komen dibawah, jika anda ingin respon yang cepat dari saya, anda bisa kirim email ke firdausofyusuf@gmail.com
Terimakasih.

Membuat validasi password menggunakan javascript

Membuat validasi pada sebuah form bisa dilakukan dengan berbagai macam cara diataranya menggunakan PHP, JQuery, atau menggunakan javascript.
Kali ini saya akan sharing bagaimana cara melakukan validasi menggunakan javascript.

validasi password javascript

Codingnya seperti ini.

<html>
<head>
</head>
<body>

    <script language="javascript">
        function validate() {
            var password1 = document.getElementById('password').value;
            var password2 = document.getElementById('repassword').value;
            if (password1 != password2) {
                alert("Password Tidak Sama!!");
            } else {
                alert("Password Tersimpan");
            }
        }
    </script>


    <form action="#" method="POST">
        <input type="password" placeholder="Masukan password" id="password" />
        <input type="password" placeholder="Masukan Kembali password" id="repassword" />
        <input type="Submit" onClick="validate();" value="OK" />
    </form>
</body>

</html>

Penjelasan

1. Membuat form, membuat input bertipe password dan memberi id yang unik pada setiap inputnya.

<form action="#" method="POST">
<input id="password" placeholder="Masukan password" type="password" />
<input id="repassword" placeholder="Masukan Kembali password" type="password" />

2. Membuat input bertipe submit, dan memberi action yaitu onClick. dan mengisikan fungsi validate(); kedalam event onclicknya

  <input type="Submit" onClick="validate();" value="OK" />

3. Membuat javascript validasi yang akan dipanggil ketika mengklik tombol OK

<script language="javascript">
        function validate() {
            var password1 = document.getElementById('password').value;
            var password2 = document.getElementById('repassword').value;
            if (password1 != password2) {
                alert("Password Tidak Sama!!");
            } else {
                alert("Password Tersimpan");
            }
        }
    </script>

Anda juga bisa menambahkan validasi banyaknya leng minimal yang harus diisi pada kondisi if di funtion  validate()
Semoga membantu