Membuat Aplikasi Upload File Progressbar menggunakan PHP dan Jquery


ri32-upload-progress-bar

 

Latar Belakang

Kita mungkin pernah membuat aplikasi upload file menggunakan PHP. file diupload saat user menekan tombol upload dan halaman web menjadi putih selama proses upload file yang berukuran lumayan besar. bagaimana jika kita ingin mengetahu progress dari proses upload file?

Solusi

Pada artikel ini saya ingin sharing aplikasi php yang digunakan untuk upload file, dengan penambahan fitur progressbar. sehingga user dapat mengetahui progress dari proses upload file tersebut. kita sudah 100%, maka halaman akan di redirect ke halaman download. Setelah proses upload selesai, file disimpan di folder tertentu, dan nama file serta data yang diinput di halaman form akan disimpan di table data.

Dihalaman download sudah saya tambahkan fitur untuk download file atau hapus file yang telah di download, sekaligus menghapus record yang ada di table data.

ri32-download-file

Free Download :

http://sourcecode.kangagus.id/script-upload-progressbar

Koleksi Buku :

Sekian artikel dari saya semoga bermanfaat untuk teman-teman dan anda semua…aamiin

Cilangkap, 07-12-2014

GusnaNuri

Membuat aplikasi upload multiple file dengan Jquery


25-11-2014 23-22-42

Latar Belakang

Jika user ingin mengupload beberapa file sekaligus, maka web programmer harus mencari jquery plugin untuk upload multiple file. salah satu referensi saya adalah yang dibuat oleh Ravishanker Kusuma. Plugins ini juga yang saya gunakan untuk membuat ri32-encoder.

Jika setelah diupload ingin dimasukan ke database alamat filenya, maka silahkan kombinasikan dengan tulisan saya membuat-aplikasi-upload-dan-download-file-dengan-php

Cara Penggunaan

  1. Download plugins, extract dan simpan ke folder htdocs
  2. Jangan lupa buat folder “uploads” , jika tidak maka akan ada error. nama folder “uploads” bisa di sesuaikan dengan yang ada di script file upload.php dan delete.php25-11-2014 23-36-49
  3. Jalankan di web browser misalnya http://localhost/jquery/
  4. Klik tombol “Upload” pilih beberapa file, kemudian klik Open. maka file-file tersebut akan terupload dan tersimpan di folder “uploads”

Setup Plugins

Plugins ini memiliki beberapa setup misalnya :

  • Dapat menampilkan tombol delete file yang telah diupload
  • Filter file yang diupload, misalnya tidak boleh upload file .mp3, .zip, atau file .pdf
  • Jalankan fungsi dragDrop (true/false)

25-11-2014 23-43-27

Jika ingin variasi jquery plugin upload yang lain, bisa mengunjungi situs ini http://designscrazed.org

Referensi :

Sekian artikel dari saya, semoga bermanfaat untuk teman-teman dan anda semua…aamiin

Cilangkap, 25-11-2014

GusnaNuri

Cara mencegah upload file backdoor ke website


 

Latar Belakang

Saya pernah menemukan file backdoor pada website demo saya dalam folder upload gambar atau dokumen. file yang diupload biasanya adalah file b374k-shell.

User memanfaatkan kelemahan yang terdapat dalam aplikasi upload file. yang tidak terdapat filter file yang diperbolehkan atau dibatasi untuk diupload ke sistem.  

PHP Backdoor termasuk salah satu jenis trojan yang digunakan untuk meremote, sehingga bisa melakukan create file, upload file, remove, change-mode permission, bahkan sampai Denial Of Service hanya dengan satu file php yang biasa disebut backdoor.

Contoh Aplikasi Upload

Filter Upload File

$nama_file=$_FILES[‘datafile’][‘name’];
$ext = pathinfo($nama_file, PATHINFO_EXTENSION);

//$ext = end(explode(“.”, $nama_file));
//$path = pathinfo($nama_file);
//$ext = $path[‘extension’];

if ($ext==”php”)
{
?><script language=”javascript”>alert(‘File tidak diperbolehkan!’)</script><?php
}else{
//Upload File
}

Kesimpulan

Saat membuat aplikasi upload file, perlu diperhatikan filter ukuran file, serta tipe file yang diperbolekan untuk diupload.

Sekian artikel dari saya semoga bermanfaat untuk teman-teman dan anda semua…aamiin

Cilangkap, 04-04-2014

GusnaNuri

Aplikasi upload dan update Photo menggunakan PHP & MySQL


aplikasi upload update photo RI32

Aplikasi update Photo Biodata

Latar Belakang

Dalam artikel ini saya akan menjelaskan tentang teknik upload dan update photo menggunakan php dan mysql yang dituangkan dalam sebuah aplikasi biodata. Sehingga user dapat :

  1. Mengupload photo beserta biodatanya
  2. Menghapus data beserta photo yang di upload
  3. Mengupdate photo dalam biodata tanpa duplikasi photo sebelumnya

Filter Type Photo

if($type != “image/gif” && $type != “image/jpg” && $type != “image/jpeg” && $type != “image/png”) {
echo “File Yang Di izinkan Hanya jpg,jpeg,png,gif!! <a href=index.php> Silahkan ulangi</a>”; }

Filter Ukuran Photo

if($ukuran>1000000){
echo “File Yang Di izinkan Hanya berukuran kurang dari 1MB!! <a href=index.php> Silahkan ulangi</a>”; }

Hindari nama file yang sama

$uploaddir=’./photo/’;
$rnd=date(His);
$nama_file_upload=$rnd.’-‘.$nama_photo;
$alamatfile=$uploaddir.$nama_file_upload;
if (move_uploaded_file($_FILES[‘photo’][‘tmp_name’],$alamatfile))

Algoritma Update Photo

  1. Buat field hidden di form edit untuk menyimpan nilai password lama dan  photo lama.
  2. Jika user tidak menginput photo atau password baru. Maka saat update data, aplikasi masih menggunakan pasword dan photo yang lama.
  3. Khusus untuk photo jika user input photo baru, maka photo lama akan di hapus, dan aplikasi akan meng-upload photo yang baru.
  4. Jika berhasil melewati semua filter, maka data akan di update ke database.

Free Download :

http://sourcecode.kangagus.id/script-upload-dan-update-photo

Koleksi Buku :

Sekian artikel dari saya, semoga bermanfaat untuk teman-teman dan anda semua…aamiin

Cilangkap, 07 Juli 2013

GusnaNuri

Solusi untuk error upload theme prestashop


Latar Belakang

An error has occurred during the file upload.

Ketika saya mengupload theme prestashop secara online, terdapat pesan kesalahan seperti diatas. saya menggunakan prestashop versi 1.5.0.

File theme yang saya upload dalam bentuk file zip adalah 3,8MB, namun ketika di extract ukuran totalnya 6,8MB

error-theme-ri32

Jawaban dari Forum : with the error can’t upload template.Please contact with host admin: increase limit_upload_size in your host to 20Mb

Kemungkinan masalah tersebut di akibatkan karena setting di server hosting yang terdapat batasan ukuran file saat upload.

Solusi upload Theme

Folder module dan theme di upload terlebih dahulu ke hosting, sehingga file-file tersebut tidak saya upload lg melalui website prestashop saya, melainkan sudah melalui software FTP.

theme-ri32

Folder Module & Theme Awal

  • Saya mengupload folder module dan theme menggunakan software FTP Filezilla.
  • Upload semua module dari folder module local, ke folder module yang ada di hosting
  • Upload folder theme dari komputer local, ke folder theme yang ada di hosting

theme-server-ri32

Upload folder theme kosong

Setelah folder module dan folder theme berhasil di upload ke server hosting, maka sekarang kita akan “mengakali” dengan cara meng-upload file theme namun dengan keadaan file-file yang ada di dalam folder module dan theme yang ada di komputer local di hapus semua. Sehingga yang tersisa hanya folder kosong module, folder kosong theme, dan file Config.xml

theme-ri32

Folder Module & Theme Kosong

  • File Config.xml dibutuhkan karena didalamnya terdapat setting untuk menyesuaikan antara theme yang baru di upload dengan sistem prestashop yang ada.
  • Kemudian buat file zip yang berisi folder module, theme, dan file config.xml yang tadi misalnya nama filenya leo_electronics_v15x.zip
  • Setelah itu upload melalui website prestashop jika berhasil tanpa tanda error lagi, maka ikuti langkahnya sampai selesai

theme-berhasil-ri32

Sekian artikel dari saya semoga bermanfaat untuk teman-teman dan anda semua…aamiin

Cilangkap, 29-12-2012

Gusnanuri

Panduan upload file web ke free hosting


Artikel ini adalah bagian dari artikel sebelumnya. walau isinya sama, namun judulnya saja yang berbeda. agar teman-teman yang lain dapat menemukan informasi tentang bagaimana cara mengupload file web yang sudah kita buat.

Sebelunya saya menggunakan free hosting http://000webhost.com untuk menyimpan file-file dari situs http://labhouse.co.cc. namun kendala yang saya rasakan saat membuat akun di free hosting tersebut adalah lamanya waktu konfirmasi untuk mengaktifkan akun yang kita buat. Sehingga alternatifnya kita bisa menggunakan free hosting yang lain salah satunya adalah http://byethost.com.

Sedangkan untuk tutorial cara mengupload file web ke free hosting tersebut dapat teman-teman download dalam bentuk file PDF yang membahas tentang :

  • Tahap persiapan di komputer local
  • Membuat domain gratis di situs co.cc
  • Membuat hosting gratis di situs byethost.com
  • Membuat database di hosting byethost.com
  • Mengimport database ke hosting byethost.com
  • Mengupload file-file web ke hosting byethost.com
  • Mengubah file koneksi database di hosting byethost.com
  • Menggabungkan domain co.cc dengan hosting byethost.com

Download

http://www.4shared.com/document/d6WYRiTd/Modul_Upload_Web_ke_Domain_dan.html

Sekian artikel dari saya semoga bermanfaat untuk teman-teman dan anda semua…aamin 🙂

Depok, 06-02-2011

 

noname

Membuat Aplikasi Upload dan Download File dengan PHP


Ada temen saya yang bertanya mengenai coding cara upload dan download file di PHP. Pada aplikasi yang saya buat kali ini, ada 2 bagian yaitu bagian upload dan bagian download file. Sedangkan tampilanya disimpan dalam satu halaman utama seperti terlihat pada gambar diatas. Desain Table : Bagian pertama adalah aplikasi untuk upload gambar script nya terdapat pada file upload.php. adapun langkah-langkahnya adalah sebagai berikut :

  1. Pada form di file index.php sebelumnya, ada tag untuk browse gambar dengan nama variabelnya adalah “datafile”
  2. Kemudian di file upload.php ada script untuk menangkap nilai variable datafile tersebut $nama_file=$_FILES[‘datafile’][‘name’];
  3. Setelah itu definisikan alamat file yang akan digunakan untuk menyimpan file yang diupload tadi ke dalam sebuah folder, dan untuk mencatat alamat file yang disimpan tersebut ke dalam sebuah database. $alamatfile=$uploaddir.$nama_file;
  4. Setelah itu kita menggunakan fungsi PHP untuk melakukan upload file move_uploaded_file($_FILES[‘datafile’][‘tmp_name’],$alamatfile)
  5. Jadi konsep upload file ini adalah kita menyimpan file secara fisik dalam sebuah folder yang ada di dalam webserver. Sedangkan alamatnya disimpan di dalam sebuah database. Sehingga jika nanti kita akan mengakses file tersebut di halaman web, kita cukup membuat link menggunakan alamat file yang sudah tercatat di database tersebut.
  6. Selesai.

Bagian kedua dari aplikasi ini adalah menampilkan link download terhadap file-file yang sudah diupload sebelumnya. Adapun langkahnya adalah sebagai berikut :

  1. Membuat query untuk menampikan data yang ada pada table $download=mysql_query(“select * from tabel_data”);
  2. Membuat looping yang biasa dilakukan untuk menampilkan data hasil query while($row=mysql_fetch_array($download)){
  3. Membuat link untuk mendownload file file yang ada didalam folder web berdasarkan alamat file yang ditampilkan dari database
  4. Selesai

Mengubah Ukuran Maksimal File yang di Upload cari atau buka file php.ini dan lihat settingannya :

;;;;;;;;;;;;;;;; ; File Uploads ; ;;;;;;;;;;;;;;;; ; Whether to allow HTTP file uploads. ; http://php.net/file-uploads file_uploads = On ; Temporary directory for HTTP uploaded files (will use system default if not ; specified). ; http://php.net/upload-tmp-dir upload_tmp_dir = “C:\xampp\tmp” ; Maximum allowed size for uploaded files. ; http://php.net/upload-max-filesize upload_max_filesize = 128M

Download  http://www.4shared.com/file/oLIXiBvT/upload_download.html

Sekian tutorial dari saya, semoga semua aplikasi sederhana yang pernah saya buat dapat bermanfaat untuk Anda semua…aamin

Depok, 23 Juni 2010

<

p style=”text-align:center;”>noname

%d bloggers like this: