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

Advertisements

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

Menu Accordion Horizontal Jquery


Latar Belakang

Banyak jenis menu yang digunakan untuk navigasi dalam sebuah web. ada yang horizontal maupun vertikal. ada yang berjenis topdown sampai jenis menu accordion yang sekarang saya bahas.  menu ini dibuat menggunakan JQuery.

Potongan Script

<li>

Ri32 Web Blog

Ri32 Web Blog

Berawal dari kesenangan menulis dan mendokumentasikan apa yang sudah dipelajari.
berbagi secercah ilmu sebagai rasa syukur atas nikmat Allah yg tak dapat diukur.
Semoga bermanfaat untuk teman-teman dan anda semua…aamiin 🙂

more →

</li>

*Jika ada content yang ingin ditambahkan, teman-teman tinggal copy paste dan ganti keterangannya.

Download

http://www.4shared.com/zip/NQxEfqtX/profile-ri32-accordion.html

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

Depok, 14-01-2012

noname

Membuat aplikasi pilih warna dengan JQuery


Color Picker

Artikel ini membahas fitur web yang digunakan untuk memilih warna berdasarkan pilihan user. misalnya aplikasi untuk memilih warna kesukaan atau contoh yang lainnya. Aplikasi ini dibuat dengan library jQuery Color Picker: Farbtastic

Potongan Script JQuery

http://jquery-1.6.4.min.js
 http://farbtastic.js
 <link rel="stylesheet" href="farbtastic.css" type="text/css" />
 
  $(document).ready(function() {
    $('#demo').hide();
    $('#picker').farbtastic('#color');
  });
 
Potongan Script HTML
<form action="index.php" style="width: 400px;" method="post"> <table> <tr><td>Nama kamu :</td><td><input type="text" name="nama"/></td></tr> <tr><td>Warna Kesukaanmu :</td><td><input type="text" id="color" name="color" value="#5119e1" /></td></tr> <tr><td></td><td><input type="submit" value="Kirim" name="kirim"> <input type="reset" name="Batal"/></td></tr> </table>
Download
http://www.4shared.com/file/1x1vZa6_/warna.html
Sekian dari saya semoga bermanfaat untuk teman-teman dan anda semua...aamiin

30-10-2011

noname

Aplikasi Game Memory dengan JQuery


Artikel kali ini saya menulis tentang aplikasi game memory menggunakan JQuery. jadi selain untuk mempercantik halaman web, Jquery juga bisa digunakan untuk membuat sebuah game.

Game ini melatih memory visual anda dengan cara klik salah satu gambar dan klik pasangan gambar yang sama. dalam game tersebut akan tercatat berapa kali anda klik gambar. target dari game ini adalah mengklik paling sedikit dengan gambar muncul semua secara berpasangan.

Demo Game

http://demo.superdit.com/jquery_memory_game/

Download Game

http://www.box.net/shared/55nk2x1rov

Game yang lain

Sekian game dari saya semoga bermanfaat untuk teman-teman dan anda semua.

Depok, 17-10-2011

noname

Membuat Slideshow Gallery gambar dengan PHP dan JQuery


Aplikasi ini adalah gabungan dari 2 aplikasi yaitu aplikasi jQuery untuk slideshow (amazon_scroller.js) dan aplikasi untuk zoom image (jquery.bigPicture.js).  aplikasi ini bertujuan untuk membantu teman-teman dalam menampilkan gambar dalam bentuk slideshow. dan ketika suatu gambar di klik dalam slideshow tadi, maka aplikasi jQuery Zoom akan memperbesar gambar dalam ukuran gambar yang asli.

Sedangkan data gallerynya di ambil dari sebuah database “test” dan nama tabelnya “tools_gallery

Tabel “tools_gallery”

Script Include JQuery

<!—untuk zoom image–>
http://./js/jquery.js
http://./js/jquery.bigPicture.js
http://./js/jquer.bigPicture-min.js
http://./js/jquery.bigPicture-pack.js
http://./js/jquery.easing.js
<link rel=”stylesheet” type=”text/css” href=”css/core.css”/>
<link rel=”stylesheet” type=”text/css” href=”css/skin.css”/>

<!–untuk slideshow–>
<link href=”css/amazon_scroller.css” rel=”stylesheet” type=”text/css”></link>
http://js/amazon_scroller.js

Menyisipkan Syntax Javascript

$(‘a.info’).bigPicture({
‘enableInfo’: true,
‘infoPosition’: ‘bottom’
});

Menampilkan gambar

Download

http://www.4shared.com/file/kI8ABhIV/slideshow-gallery.html

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

Depok, 26-01-2011

noname

Kumpulan Link Plugins JQuery


Menurut situs resmi nya  jquery adalah :

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

Intinya jquery digunakan untuk memanipulasi tampilan website kita menjadi lebih baik dan menarik dari sisi tampilannya. JQuery berisi sekumpulan syntax javascript dan terdapat konsep Ajax didalamnya.

Artikel ini merupakan kumpulan link website yang menyediakan plugins jQuery.

Form Validation

File upload

Form – Select Box stuff

Form Basics, Input Fields, Checkboxes etc.

Time, Date and Color Picker

Rating Plugins

Search Plugins

Inline Edit & Editors

Audio, Video, Flash, SVG, etc

Photos/Images/Galleries

Google Map

Games

Tables, Grids etc.

Charts, Presentation etc.

Border, Corners, Background

Text and Links

Tooltips

Menus, Navigations

Accordions, Slide and Toggle stuff

Drag and Drop

XML XSL JSON Feeds

Browserstuff

Alert, Prompt, Confirm Windows

CSS

DOM, Ajax and other jQuery plugins

Sekian artikel dari saya, semoga dapat bermanfaat untuk teman-teman dan anda semua.


Depok, 12-12-2010

noname


%d bloggers like this: