Bootstrap jQuery MySQL PHP

Membuat Upload File dengan Progress bar (PHP, MySQL, AJAX, Bootstrap)

Written by Fatoni

Membuat Upload File dengan Progress bar (PHP, MySQL, AJAX, Bootstrap). Hai sobat tutorialweb.net, kali ini saya akan membuat sebuah tutorial tentang cara membuat Upload file dengan progress bar, tentu saja menggunakan PHP untuk bahasa pemrogramannya, MySQL sebagai databasenya, AJAX untuk menghandle progress barnya, dan Bootstrap untuk interfacenya biar cantik… šŸ™‚

Oh ya sob, tutorial ini saya ambilkan dari Produk Premium yang sebelumnya sudah pernah saya terbitkan, yaitu File Management Pro. Dari situ hanya saya ambilkan uploadnya saja, untuk download dan manajement lainnya tidak saya ikutkan karena itu masuk di fitur premium di aplikasi tersebut.

Langsung saja kita masuk ke dalam tutorialnya, bagaimana untuk membuat Upload File dengan Progress bar ini. Ikuti dengan seksama ya sob, kalau tidak bisa silahkan kontak saya aja (text only ya sob).

Nanti kita akan membuat file berikut ini sob:

  • index.php (untuk tampilan awal, form dan progress bar)
  • config.php (koneksi ke database)
  • upload.php (proses upload file, menyimpan data ke database)
  • upload.js (untuk handle progress bar)

Download Bootstrap

Pertama karena ini menggunakan Bootstrap untuk interfacenya, maka silahkan download dulu Bootstrap di webseite resminya, atau bisa klik disini. Saya masih menggunakan yang versi 3 ya.

Nah, selesai di download maka sobat akan mendapatkan fileĀ bootstrap-3.3.7-dist.zip. Silahkan di ekstrak menggunakan winrar/winzip atau sejenisnya, maka sobat akan mendapatkan 3 folder utama, yaitu css, font, dan js.

Masukkan 3 folder tersebut kedalam folder misal dengan nama upload-progressbar, dan masukkan di folder htdocs pada web server localnya (C:\xampp\htdocs\upload-progressbar), nah jika sudah maka kita lanjutkan ke tahap selanjutnya.

Membuat Database dan Table

Untuk membuat database silahkan masuk ke alamat localhost/phpmyadmin, kemudian buat database baru dengan nama tutorialweb_upload_progressbar, jika sudah masuk ke menu SQL, dan copy paste kode di bawah ini:

sobat akan mendapatkan sebuah tabel dengan namaĀ files.

Untuk database saya rasa cukup, dan kita lanjutkan ke tahap selanjutnya.

Membuat koneksi ke database

Mudah saja sob, silahkan copy paste kode di bawah ini ya, dan simpan dengan namaĀ config.php

Silahkan ganti koneksinya sesuai dengan server sobat sendiri ya.

Membuat Halaman index.php (form upload & progress bar)

Untuk halaman index.php tidak banyak yang bisa dijelaskan, silahkan copy paste kode di bawah ini, kemudian simpan dengan nama index.php

Penjelasan kode menyusul ya sob. šŸ™‚

Membuat file upload.php

Oke sob, fileĀ upload.php ini gunanya untuk menghandle proses upload mulai dari menyimpan data ke database sampai menyalin file tersebut ke folderĀ files. Dan berikut ini kodenya;

Penjelasan kode sebagian sudah saya masukkan di scriptnya, kalau kurang jelas bisa komentar ya.

Membuat file upload.js

File upload.js ini berfungsi untuk menghandle progress barnya, hingga memunculkan pesan ID terakhir yang masuk ke database, berikut ini script lengkapnya:

simpannya di folderĀ js ya sob, beri nama upload.js

Sudah deh selesai. sekarang bisa sobat coba sendiri di rumah.

Kalau sobat bingung gak bisa-bisa, silahkan inbox/sms/WA/telegram saya. Nanti akan saya kasih pencerahan, hehehhe.. šŸ™‚

Pengen yang komplit sob? silahkan order File Management Pro,

Download Upload File dengan Progress di bawah ini, demo menyusul ya.

Download :
Password :

About the author

Fatoni

Programming is my hobby, not my job.

6 Comments

Leave a Comment