membuat fitur upload file dengan php dan mysql

Selamat datang di warung belajar, melanjutkan pembahasan mengenai seri tutorial PHP, dalam tutorial kali ini kita akan belajar membuat fitur upload file dengan PHP dan MySQL.

Fitur ini biasanya digunakan untuk membuat fitur upload berkas, baik itu berkas bisa berupa image, dokumen, serta berkas – berkas lainnya.

Untuk fitur upload ini yang akan disimpan di database adalah path dari file yang diupload, bukan berupa blob, mungkin untuk pembahasan upload ke tipe data blob akan kita bahas di tutorial selanjutnya.

Baik kita langsung membahas langkah – langkahnya.

 

Membuat database untuk menyimpan data

Pada langkah awal ini kita akan menyiapkan dulu database yang digunakan untuk menyimpan data dari gambar yang diupload, langkah – langkahnya adalah sebagai berikut :

1. Pada tutorial ini kita masih menggunakan xampp, jadi untuk pembuatan databasenya menggunakan phpmyadmin, jadi silahkan jalankan service mysql di xampp control panel, lalu berikutnya akses alamat localhost/phpmyadmin

2. Lalu silahkan klik menu Basis data / database untuk membuat database baru, untuk nama databasenya disini kita akan contohkan adalah db_upload, setelah itu bisa klik tombol buat / create

3.Lalu buat tabel dengan nama tb_gambar, dengan jumlah 5 kolom, lalu klik tombol kirim.

4. Berikutnya buat kolom – kolom yang ada di tabel tb_gambar, seperti berikut ini :

Keterangan : 

  • id_gambar (integer, primary key, auto increment)
  • gambar (varchar 255)
  • keterangan (varchar 255)
  • tipe_gambar (varchar 255)
  • ukuran_gambar (integer)

Lalu silahkan klik tombol Simpan.

Jika anda tidak ingin ribet dengan proses pembuatan tabel, anda bisa langsung import perintah SQL yang kita persiapkan :

 

Membuat Project

Setelah anda sudah membuat database yang digunakan untuk menyimpan hasil upload, langkah berikutnya kita akan membuat folder dari project kita, karena di tutorial ini kita menggunakan xampp, sehingga projectnya kita simpan di C:/xampp/htdocs (karena folder instalasi xampp ada di drive C)

Contohnya kita buat folder projectnya adalah upload, berikutnya didalam folder upload silahkan buat 4 file php antara lain :

  1. koneksi.php
  2. form_upload.php
  3. index.php
  4. delete_gambar.php

lalu buat 1 folder dengan nama files, folder ini nanti yang berisi gambar hasil upload, jadi kurang lebih hasilnya adalah seperti berikut ini :

 

Membuat file koneksi ke database

Langkah berikutnya silahkan buka file koneksi.php yang sudah dibuat sebelumnya, lalu isikan dengan skrip berikut ini :

Keterangan : 

  • perintah diatas digunakan untuk koneksi ke database db_upload yang sebelumnya telah kita buat.
  • $host dengan nilai “localhost” yang merupakan alamat server databasenya
  • $user dengan nilai “root” yang merupakan user dari databasenya
  • $password dengan nilai “” yang merupakan password untuk mengakses database, nilainya kosong karena default dari xampp untuk password user root adalah kosong
  • $database dengan nilai “db_upload” yang merupakan nama dari database yang sebelumnya telah kita buat
  • Baris 6 adalah perintah untuk melakukan koneksi ke database, dan hasilnya disimpan di variabel $koneksi.

 

Membuat form untuk upload file

Setelah membuat file koneksi.php, berikutnya silahkan buka file form_upload.php, lalu silahkan tuliskan skrip seperti berikut ini :

Untuk menjalankan silahkan menggunakan alamat : localhost/upload/form_upload.php

Keterangan : 

  • Baris 25 (form_upload.php) kita membuat form dengan method=”post”, action dibiarkan kosong karena akan diproses di file ini sendiri, dan kita menggunakan perintah enctype=”multipart/form-data” karena akan membuat fitur upload file
  • Baris 29 (form_upload.php) kita membuat input dengan type file, untuk name kita beri nama “gambar”, perintah ini yang digunakan untuk membuat input form untuk upload gambar.
  • Baris 32 (form_upload.php) kita membuat textarea dengan name “keterangan” untuk menyimpan bagian keterangan.
  • Baris 37 (form_upload.php) kita membuat tombol submit dengan name “tombol”

 

Mencoba Upload File

Sebelum menjelaskan bagian proses uploadnya, kita akan coba upload file terlebih dahulu, silahkan buka form dengan menggunakan alamat localhost/upload/upload_form.php

lalu coba upload salah satu gambar, dan isikan bagian keterangan :

berikutnya silahkan klik tombol “Submit”.

Jika tidak menampilkan pesan error, berarti proses uploadnya berhasil, berikutnya silahkan cek tb_gambar didatabase db_upload.

terlihat ada 1 record yang berisi data file yang barusan kita upload.

Silahkan coba cek folder files, di folder project kita,

nah terlihat ada 1 file, file tersebut adalah file yang berhasil diupload.

 

Baik setelah mencoba form upload gambar  dan berhasil, berikutnya kita akan bahas bagaimana pemrosesan form upload tersebut.

Keterangan : 

Baris 2 (form_upload.php) kita menginclude file koneksi.php yang berisi koneksi ke database

Baris 3 (form_upload.php) kita melakukan pengecekan apakah tombol submit di klik, jika diklik maka akan menjalankan perintah yang ada di baris 5 – 17

Baris 5 (form_upload.php) kita menyimpan temporary dari file yang akan diupload didalam file $temp, dengan perintah $_FILES[‘gambar’][‘tmp_name’], gambar disini adalah name dari bagian form yang menjadi fitur upload ( type file – baris 29)

Baris 6 (form_upload.php) kita membuat variabel $name, variabel ini digunakan untuk menyimpan nama file yang diupload, perintah rand(0,9999) digunakan untuk memberikan string acak diawal nama file, hal ini digunakan untuk mencegah ada nama file yang sama.

Baris 7 (form_upload.php) kita membuat variabel $size yang digunakan untuk menyimpan ukuran file yang diupload

Baris 8 (form_upload.php) kita membuat variabel $type yang digunakan untuk menyimpan tipe file, dari berkas yang diupload.

Baris 9 (form_upload.php) kita membuat variabel $keterangan yang digunakan untuk menyimpan inputan keterangan di bagian form (baris 33)

Baris 10 (form_upload.php) kita membuat $folder yang berisi nama folder tempat menyimpan file yang diupload, dalam hal ini adalah berisi “files/”, hal tersebut karena kita menyimpan hasil upload file kedalam folder files.

Baris 11 digunakan untuk melakukan pengecekan apakah ukuran file ($size) kurang dari 2048 kb ( 2 MB ), dan memiliki extention file .jpg ataupun .png, jika bernilai true maka akan menjalankan perintah di baris 12 – 14, tetapi jika bernilai false akan menjalankan perintah dibaris 16.

Baris 12 (form_upload.php) perintah move_uploaded_file digunakan untuk upload file, perintah ini memiliki 2 argumen yaitu :

  • yang pertama adalah temporary file yang diupload, dalam contoh ini adalah variabel $temp
  • yang kedua adalah lokasi path yang digunakan untuk menyimpan file yang diupload, dalam hal ini $folder . $name
Baris 13 (form_upload.php) kita menuliskan perintah untuk menyimpan data ke tabel tb_gambar.
Baris 14 (form_upload.php) digunakan untuk redirect ke halaman index.php, halaman index.php akan berisi daftar gambar yang berhasil diupload

 

Membuat file index.php untuk menampilkan hasil upload gambar

Setelah anda belajar untuk memproses file yang diupload, berikutnya kita akan menampilkan hasil upload gambar, silahkan buka file dengan nama index.php, lalu tuliskan perintah sebagai berikut :

Untuk menjalankan file tersebut silahkan akses melalui alamat : localhost/upload

kenapa tidak menyebutkan index.php, karena file index adalah yang otomatis diakses tanpa perlu disebut, saat foldernya diakses

Keterangan : 

Hasilnya akan menampilkan 1 data hasil inputan kita di form_upload, dan terlihat ada gambar yang kita upload

Baris 2 (index.php) kita include file koneksi.php yang berisi koneksi ke database.

Baris 3 (index.php) kita menuliskan query untuk mendapatkan seluruh data yang ada di tabel tb_gambar, dengan perintah “select * from tb_gambar” dan hasil query disimpan di variabel $query

Baris 11 – 19 (index.php) kita menuliskan tag tabel, serta membuat head dari tabel tersebut.

Baris 22 (index.php) kita extract variabel $query yang berisi data dari tabel tb_gambar, dengan menggunakan perintah while($row = mysqli_fetch_array($query)), setiap hasil record akan disimpan di variabel $row.

Baris 25 – 32 (index.php) kita menampilkan data disesuaikan dengan kolom yang ada di head tabel, pemanggilan datanya menggunakan array dengan element nama kolom di tabel tb_gambar.

Baris 27 (index.php) kita menggunakan tag <img> dengan nilai src mengakses file image hasil uploadnya yang berada di folder files

Baris 31 (index.php) kita membuat tombol untuk menghapus data gambar dengan menggunakan tag a, dimana value attribute href akan mengakses file delete_gambar.php dengan mengirimkan 1 paremeter get dengan nama id_gambar dengan value id_gambar yang akan dihapus.

 

Membuat File delete_gambar.php

File ini digunakan untuk memproses data gambar yang akan dihapus, silahkan buka file delete_gambar.php, lalu isikan skripnya sebagai berikut :

Keterangan : 

Perintah ini digunakan untuk melakukan pengecekan, apakah saat mengakses file delete_gambar.php, terdapat variabel id_gambar dengan method get, jika ada maka akan menjalankan perintah di baris 4 – 11, jika tidak ada maka akan menjalankan code di baris 15

Baris 4 kita include file koneksi.php yang berisi koneksi ke database

Baris 5 kita membuat variabel $id_gambar yang digunakan untuk menyimpan hasil data id_gambar yang dikirim melalui method get

Baris 6 kita membuat perintah untuk mendapatkan data di tb_gambar dengan id_gambar yang sesuai dengan variabel $id_gambar (id gambar yang akan dihapus)

Baris 7 kita akan menyimpan data hasil query kedalam variabel $data_gambar, data yang disimpan akan berbentuk array karena perintah $query->fetch_array()

Baris 9 kita menuliskan perintah untuk menghapus data di tabel tb_gambar yang id gambarnya sesuai dengan id_gambar yang akan dihapus

Baris 10 digunakan untuk menghapus gambar yang ada di folder files, data gambar disesuaikan dengan data mana yang dihapus

Baris 11 digunakan untuk redirect ke file index.php ketika proses hapus gambar telah selesai.

 

Baik kurang lebih seperti itu teman – teman pembahasan tutorial kali ini, kita sudah belajar untuk membuat fitur upload file dengan PHP dan MySQL, untuk souce code hasil belajar bisa download disini

Sekian dulu tutorial kali ini, sampai jumpa di tutorial selanjutnya.

 

Leave a Comment

Your email address will not be published.