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

Membuat window Modal pada ZK Framework

Kali ini saya akan sharing tentang bagaimana cara menampilkan modal pada zkoss framework. biasanya window bertype modal dipakai untuk menampilkan form/window yang informasinya tidak terlalu banyak.

Langsung saja, pertama anda harus membuat projek ZK baru, jika anda belum bisa membuat projek zk anda bisa membacanya disini

pada file index.zul anda bisa memodifikasinya menjadi seperti ini

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

<zk xmlns="http://www.zkoss.org/2005/zul">
      <window title="Contoh Modal" apply="controller.indexComposer">
        <button id="btnModal"
                label="Tampilkan Modal"
        />
    </window>
</zk>

Kemudian buat file index2.zul

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

<zk xmlns="http://www.zkoss.org/2005/zul">
    <window mode="modal"  closable="true" width="80%" id="winmodal" apply="controller.index2Composer">
        ini adalah tampilan window modal
      
       
        <listbox id="box" multiple="true" checkmark="true" >
        <listhead >
            <listheader label="Name"/>
            <listheader label="Gender"/>
            <listheader label="Age"/>
            <listheader label="Description"/>
        </listhead>
        <listitem>
            <listcell label="Mary"/>
            <listcell label="FEMALE"/>
            <listcell label="18"/>
            <listcell label="A young lady."/>
        </listitem>
        <listitem>
            <listcell label="John"/>
            <listcell label="MALE"/>
            <listcell label="20"/>
            <listcell label="A college student."/>
        </listitem>
       
    </listbox>   
        <button id ="btnClose"
        label="Tutup" />
       
    </window>
</zk>

Lalu buat folder baru pada source Packages, beri nama "controller"

kemudian buat java class baru dan beri nama indexComposer, indexComposer ini berfungsi sebagai controller dari file index.zul

package controller;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Listbox;
import org.zkoss.zul.Window;

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

@Wire
private Listbox Listboxs;

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

}

public void onClick$btnModal(Event e) throws InterruptedException {
Window window = (Window) Executions.createComponents(
"index2.zul", null, null);
window.doModal();

}

}

Terakhir buat java class untuk controller dari file index2.zul, yaitu file index2Composer

package controller;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Listbox;
import org.zkoss.zul.Window;

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

@Wire
private Window winmodal;
@Wire
private Listbox Listboxs;

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

}

public void onClick$btnClose(Event e) throws InterruptedException {
winmodal.detach();
}

}

Jalankan projek anda, jangan lupa pilih server untuk menjalankannya

Anda juga bisa mendownload projeknya di github saya disini.

Terimakasih Semoga membantu.

Membuat project ZKoss (ZK) Pertamamu menggunakan Netbean

 ZKoss atau ZK merupakan framework yang biasanya digunakan untuk membuat interface di dalam bahasa pemrograman JAVA, khususnya JAVA EE, untuk lebih jelasnya bisa anda baca di https://www.zkoss.org/

1. Instalasi Plugin.
Yang harus anda miliki adalah plugin REM Plugin terlebih dahulu, anda dapat mendownloadnya disini atau disini

Lalu pada Netbean IDE anda, klik tool plugin, klik tab downloaded -> add plugins, (pilih file REM yang sudah di download)lalu klik install.

add plugin REM

Setelah menginstall plugin REM, anda akan diminta restart netbean.

2. Membuat Projek ZK
Klik file-> new project, pilih java web, lalu cari ZK Application.
   ddddBeri nama project anda.

Create New ZK Project

Beri Nama projek anda

Setelah projet terbentuk jalankan projek dengan cara klik kanan->Run atau pilih tombol RUN Project

Jika berhasil akan muncul tulisan "My ZK Applicatin pada browser anda", untuk mengeditnya, anda bisa lakukan pada file index.zk

tampilan ZK pertama kali

Semoga membantu, terimakasih.

Cara Melihat Password Wifi Yang Sudah Connect

Asalamualaikum
Terkadang kita lupa password wifi yang sudah atau sedang terkoneksi dengan laptop kita, cara ini saya lakukan di laptop saya yang bersistem operasi windows 10, tapi juga dapat digunakan di windows 7 dan 8.
langsung saja, pertama kita arahkan kursor ke lambang wifi ( biasanya dibawah kanan) kemudian klik kanan ==> pilih "Open Network And Sharing Center",

klik kanan logo wifi

Kemudian akan terbuka menu network and sharing center pada control panel, lalu klik pada nama wifinya, maka akan muncul pop up status wifi yang sedang terhubung.

pilih nama wifi

Lalu klik tombol wireless properties. setelah muncul pop up wireless propserties klik pada tab security, terakhir check pada checkbox "Show Caracter".

klik wireless properties

chekclist show character

Semoga artikel saya dapat membantu, Wasalam

Cara Men-generate SQL query dari diagram ERD menggunakan Visual Paradigm

Kali ini saya akan sharing sedikit tentang bagaimana membuat queri ddl dari sebuah diagram erd.
tools yang saya gunakan adalah sebuah software/tool yang digunakan untuk membuat diagram-diagram UML, untuk lebih jelasnya bisa langsung kunjungi websitenya disini.

Langkah pertama yang harus dilakukan adalah membuat diagram ERD nya terlebih dahulu. setelah diagram ERD sudah dibuat. silahkan anda pilih semua objek yang ada (ctrl+A) lalu klik kanan pada salah satu diagramnya, kemudian pilih generate SQL (ada dipilihan paling bawah).

membuat erd pada visual pardigm

ctrl+A klik kanan dan pilih generate sql

Selanjutnya anda akan diberikan pilihan ingin membuat sql untuk database apa, disana tersedia mysql, postgresql, sqllite dan lain-lain. kali ini saya memilih mysql.

memilih datase

Anda hanya cukup meng-copy file ddl nya untuk membuat tabel-table didalam database yang anda hendak buat.

Terimakasih, semoga membantu