Pada tutorial kali ini saya akan menjelaskan tentang bagaimana cara membuat form upload file dengan extjs dan php, file extjs disini digunakan sebagai form tampilannya, form extjs itu sendiri sangat elegan (ini menurut saya sich... coz masalahnya saya g bisa desain), sedangkan file php nya digunakan sebagai proses uplopad file ke database (koneksi ke database dan insert data ke database).
Extjs yang kami gunakan disini adalah extjs versi ext-2.2, karena versi ini sudah mendukung form upload sedangkan versi yang sebelumnya belum mendukung form buat upload.
Berikut ini adalah screen shot dari file-file yang digunakan dalam tutorial kali ini:
Folder artikel ini di gunakan untuk menyimpan file artikel yang di upload.Folder ext-2.2 ini adalah frameworknya ini wajib ada kalo mau menggunkan extjs. Isi dari folder ini adalah sebagai berikut
- file-upload.css digunakan untuk mengatur tampilan dari form upload, ini merupakan bawaannya extjs, file ini ada di dalam foder ext-2.2/examples/form.
- FileUploadField.js ini nantinya yang akan dipanggil oleh form upload yang kita buat. File ini juga bawaannya extjs, file ini ada di dalam foder ext-2.2/examples/form.
- image_add.png adalah image yang digunakan sebagai icon browse.
- koneksi.php file ini digunakan untuk koneksi ke database, databse yang kami gunakan disini adalah mysql dan nama database dari tutorial kali ini adalah "blog".
<?php
$names = "localhost";
$username = "root";
$pass = "";
$dbname = "blog";
$koneksi = mysql_connect($names,$username,$pass)or die('error'.mysql_errno());
$selecdb = mysql_select_db($dbname);
?>
- upload.html file ini digunakan untuk memanggil beberapa file extjs termasuk file (file-upload.css, FileUploadField.js dan upload.js)
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext-2.2/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="ext-2.2/resources/OliveTheme/css/xtheme- olive.css" />
<script type="text/javascript" src="ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.2/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="file-upload.css"/>
<script type="text/javascript" src="FileUploadField.js"></script>
<script type="text/javascript" src="upload.js"></script>
<style>
.upload-icon {
background: url('image_add.png') no-repeat 0 0 !important;
}
</style>
</head>
<body>
<table align="center">
<tr>
<td>
<div id="form"></div>
</td>
</tr>
</table>
</body>
</html>
urutan file yang ad di dalam tag head harus urut, tidak boleh diganti, karena itu adalah aturan dari extjs, kalo di ganti maka error yang akan di dapet (hehehe.. hehehe..)
- upload.js ini adalah form utama dari tutorial ini.
Ext.onReady(function(){Ext.QuickTips.init();var fp = new Ext.FormPanel({renderTo: 'form',// ini akan di panggil di upload.html
fileUpload: true,width: 300,frame: true,//title: 'File Upload Form',autoHeight: true,bodyStyle: 'padding: 10px 10px 0 10px;',labelWidth: 50,
defaults: {anchor: '95%',allowBlank: false,msgTarget: 'side'},items: [{xtype: 'textfield',name: 'namalaporan',//harus sama engan kolom di di databesefieldLabel: 'Name File'},{xtype: 'fileuploadfield', id: 'form-file', emptyText: 'Select an file', fieldLabel: 'File', name: 'namaFile',//harus sama engan kolom di di databese buttonCfg: { text: '', iconCls: 'upload-icon'//icon buat browse } }], buttons: [{ text: 'Save', handler: function(){ if(fp.getForm().isValid()){ fp.getForm().submit({ url: 'phpupload.php',//akan manggil file phpupload.php ketika tombol save di tekan waitMsg: 'Uploading your photo...', success: function(fp, o){ Ext.MessageBox.alert('Creation OK','Tambah Laporan Berhasil..');//alert ketika proses upload sukses }, failure: function(fp, o){ Ext.MessageBox.alert('Warning','Tambah Laporan Gagal...'); //alert ketika gagal } }); } } },{ text: 'Reset', handler: function(){ fp.getForm().reset(); } }] }); var createwindow = new Ext.Window({ //frame:true, title:'Form Upload', width:315, height:150, closable: false, items: fp//manggil form panel }); createwindow.show(); });
- phpupload.php file ini digunakan menginsertkan data ke database
<?php
include "koneksi.php";
$namaLaporan = $_POST['namalaporan'];
$namaFile = $_FILES['namaFile']['name'];
move_uploaded_file ($_FILES['namaFile']['tmp_name'],"artikel/".$_FILES['namaFile']['name']);
$query = "INSERT INTO upload (`namalaporan`,`namaFile`) VALUES ('$namaLaporan','$namaFile')";
$result = mysql_query($query);
if($result)
{
echo "{success:true}";
}
else
{
echo "{success:false}";
}
?>
penulisan echo diatas harus sperti itu atau bisa dengan cara berikut :
echo '{"success":"true"}';
berikut adalah screen shot dari form upload file:
Kalo proses upload qt sukses maka akan ada alert sebagai beikut:
Dan berikut adalah code sql dari tutorial ini:
CREATE TABLE `upload` (
`namalaporan` varchar(100) NOT NULL,
`namaFile` varchar(100) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
Baca juga cara membuat add, edit dan delete menggunakan extjs dan php
download source code lengkapnya disini
via ziddu>
Title: Membuat Form Upload File dengan Extjs dan PHP
Posted by faisal
Thanks for reading about Membuat Form Upload File dengan Extjs dan PHP
Posted by faisal
Thanks for reading about Membuat Form Upload File dengan Extjs dan PHP
+ comments + 9 comments
waw nice :)
om kalo editornya suka pake apaan om ..
Kok gak jalan mas? yang script dari mas jg gak jalan. apa ada yang salah dengan komputer saya? tolong bales ke ksatria_muda85@yahoo.co.id terimakasih mas... salam kenal
cool :)
nice tutorial..
numang donlot karyanya ya mas..
mw belajar juga tapi pake jsp :)
thanks..
kl ingin file yg diupload
di filter by file type, bagaimana ya mas? misalnya saat ingin mengupload
hanya file *.doc atw *.xls atw *.jpeg
trims... salam kenal sebelumnya
Mantap gan
mas assalamu'alaikum boleh minta kirim ke email ga?