Archive

Archive for the ‘Javascript’ Category

One Click Upload File pada JSP (Java Server Pages)

January 15th, 2009
3 comments

jsp-logoDisini aku mencoba mengembangkan dan memodifikasi hasil surfing bersama om google untuk teknik “One Click Upload File“. Aku menggunakan JQuery untuk membuat teknik tersebut pada clientside, sebagaimana kita ketahui JQuery merupakan salah satu framework AJAX yang diminati dan populer saat ini, yang dilengkapi oleh plugin-plugin yang fantastik. Agar teknik One Click Upload ini bisa berjalan dengan baik aku menggunakan plugin  one-click upload.

Plugin tersebut bisa direview pada url http://www.michaelmitchell.co.nz/one-click-upload/ , pada url tersebut diberikan contoh untuk serverside menggunakan PHP, untuk itu aku mencoba menggunakan JSP (Java Server Pages) sebagai serverside yang bertugas untuk merespon request dan melakukan proses upload file ke server.

Demo aplikasi ini bisa dilihat disini

Berikut ini potongan dari penggunaan plugin one-click upload yang aku gunakan pada demo tersebut.

$(document).ready(function() {
 
	$('#upload').upload({
		name: 'file',
		method: 'post',
		enctype: 'multipart/form-data',
		action: '/FileUpload/doupload.jsp', //Ubah menjadi /FileUpload/Upload jika ingin mencoba servlet
		onSubmit: function() {
			$('#loading').show();
			$('#result').hide();
            $('#upload').hide();
		},
		onComplete: function(data) {
			$('#loading').hide();
			$('#result').html(data);
			$('#result').fadeIn('slow');
            $('#upload').fadeIn('slow');
		}
	});
 
})

Sedangkan untuk seversidenya sebagai berikut

<%@page contentType="text/html" pageEncoding="UTF-8" language="java"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
   <%@ page import="java.util.List" %>
   <%@ page import="java.util.Iterator" %>
   <%@ page import="java.io.File" %>
   <%@ page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
   <%@ page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
   <%@ page import="org.apache.commons.fileupload.*"%>
 
    <%
    String fullFile="";
    String realPath="";
    long sizerule = 102400; //(dalam byte) bisa diubah sesuai dengan kebutuhan
 
            boolean isMultipart = ServletFileUpload.isMultipartContent(request);
 
            if(!isMultipart){
                out.print("Request bukan multipart !!!<br>");
                return;
 
            }
 
               FileItemFactory factory = new DiskFileItemFactory();
               ServletFileUpload upload = new ServletFileUpload(factory);
               List items = null;
               try{
                   items = upload.parseRequest(request);
               }catch(FileUploadException e){}
 
               Iterator itr = items.iterator();
 
            while(itr.hasNext()){
                FileItem item = (FileItem) itr.next();
                if(item.isFormField()) {
                } else {
                    fullFile = item.getName().trim(); //Memperoleh nama_file.ekstensi
                    long filesize = item.getSize(); //Memperoleh ukuran file
 
                    //Memperoleh path tujuan upload
                    realPath = config.getServletContext().getRealPath("/") + "uploadedfile\\" + fullFile;
 
                    if(fullFile.trim().equals("")){
                       out.println("Inputan Anda masih kosong!!!<br>");
                    }else if(fullFile.indexOf(".jpg")==-1){
                       out.println("File Anda harus bertipe *.jpg <br>");
                    }else if(filesize > sizerule){
                       out.println("Ukuran file <b>"+fullFile+"</b> tidak boleh lebih dari "+
                                  (sizerule/1024)+" KB !!!<br>");
                    }else{
                            try {
                               File savedFile = new File(realPath);
                               item.write(savedFile);
                               out.print("File <b>"+fullFile+"</b> berhasil disimpan <br>");
 
                               /* File dihapus (buang saja/jadikan sebagai baris komentar pada
                                * bagian ini jika Anda ingin memperoleh/melihat hasil pada
                                * path tujuan upload)
                                */
                                new File(realPath).delete();
 
                            } catch (Exception ex) {
                                out.println("Gagal menyimpan file!!! <br>");
                                break;
                            }
                    }
                }
 
            }
%>

Sourcecode bisa diunduh disini

Untuk proses upload file aku memanfaatkan library commons-fileupload-1.2.1.jar dan commons-io-1.4.jar yang sudah aku sertakan pada file sourcecode.

Aku juga menyertakan sourcecode untuk servlet pada file yang Anda unduh tersebut jika ingin mencoba penanganan upload file pada serverside oleh servlet.

Selamat mencoba :wink:

Java, Javascript , , ,

Prevent Refresh on Countdown timer using Javascript

July 26th, 2008
8 comments

Fiuuhh…, akhirnya aku bisa bernafas lega setelah menemukan cara efisien mencegah pengulangan kembali pada countdown timer untuk aplikasi I-Lab (Interaktif Lab) untuk salah satu laboratorium Akuntansi di kampusku. Aku menggunakan cookies untuk mengatasi hal tersebut. Sebelumnya aku menggunakan AJAX(Asynchronous Javascript & XML) dengan memanfaatkan session pada serverside (PHP), namun cara ini sangat berpotensi membuat server down dikarenakan request time yang hampir tanpa jeda, karena untuk request & respon ke serverside aku set menjadi 1000ms. Bayangkan saja kalau aplikasi ini diakses oleh 50-100 mahasiswa dalam waktu yang bersamaan , wooww…, pasti down!!!!

Seharian aku mencari bagaimana cara mengatasi hal tersebut dan ternyata aku berhasil. Dengan memanfaatkan cookies pada sisi clientside (javascript) saja. Walaupun pada awalnya harus diset terlebih dahulu pada sisi serverside (PHP) namun hal tersbut hanya satu kali saja dilakukan.

Jika ingin melihat outputnya bisa klik disini

Aku akan kasih code nya :

Pertama-tama kita bikin terlebih dahulu file index.htm

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<html>
<head>
<title>Mulai</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<script type=”text/javascript”>
function mulai(){
top.location=”set.php”;
}
</script>
</head>
 
<body>
<input type=”submit” name=”Submit” value=”Mulai” onClick=”mulai();”>
</body>
</html>

Setelah itu kita bikin set.php yang akan digunakan untuk men-set awal cookie dan memberikan nilai awal waktu untuk timer. Untuk contoh disini aku beri nilai selama 10 menit.

1
2
3
4
5

<?
$set="00:10:00";
setcookie('tm',$set,(time()+3600)*24);
header("location:timer.php");
?>

Read more…

Javascript ,