Pada tutorial sebelumnya: Show
Kita sudah berhasil membuat fitur edit profile. Namun, masih belum komplit. User hanya baru bisa mengedit data dan password saja. Nah, pada tutorial ini.. Kita akan mengerjakan fitur upload avatar. Sehingga user bisa mengganti avatarnya. Kita akan memanfaatkan library upload bawaan Codeigniter untuk upload. Sebenarnya bisa juga menggunakan Upload bawaan PHP, namun karena sudah disediakan library-nya di CI.. mengapa tidak kita manfaatkan. Oke.. Kalau gitu, mari kita mulai! Apa itu Library Upload?Library upload merupakan library yang berisi class untuk upload file. Library ini dapat kita gunakan dengan melakukan load seperti ini:
Saat load library upload, kita membutuhkan variabel Pada contoh di atas, kita menentukan konfigurasi seperti:
Selain konfigurasi ini, masih ada lagi konfigurasi yang lain. Semuanya bisa dilihat di dokumentasi. Setelah melakukan load library, barulah kita bisa melakukan proses upload dengan memanggil method:
Perhatikan
Method Jika upload berhasil, maka kita bisa mengambil data file yang sudah terupload dengan method: ..dan jika gagal, kita juga bisa mengambil pesan error dari method:
Nah, biar lebih jelas.. Mari kita coba dalam project 🧑💻 Latihan: Membuat Fitur Upload FileSilahkan buka kembali project Lalu kerjakan ini: 1. Controller untuk Upload AvatarUbahlah method
Penjelasan: Pada method Kemudian, kita akan melakukan upload saat method ini menerima input Di sini kita menentukan konfigurasi upload sebagai berikut:
Perhatikan variabel Oh iya, karena id mengandung titik.. maka kita perlu menghapusnya dengan fungsi Kalau tidak dihapus, memangnya kenapa? Kalau tidak dihapus, upload filenya akan gagal. Mungkin ini bug di Library Upload atau memang untuk nama file yang mengandung simbol tidak diizinkan. Karena itulah kita harus membersihkan nama file dari simbol seperti titik. Oke, berikutnya kita menentukan folder tujuan upload.
Konstata Jika kita menyimpan project di dalam Dengan demikian, kita bisa tambahkan folder Lalu coba perhatikan juga konfigurasi ini:
Ini aritnya kita akan menindih file yang sudah diupload dengan file baru. Jika file avatar sudah ada, maka akan ditindih dengan yang baru. Kemudian kita lakukan upload dengan memanggil method
Jika kita perhatikan, method View ini berisi form upload untuk upload avatar dan ini belum kita buat. Nanti kita akan buat setelah membuat folder upload. 2. Membuat Folder UploadBuatlah folder baru di dalam folder project dengan nama Jika kamu menggunakan Linux, jangan lupa atur hak akses foldernya agar bisa upload file. Ketik perintah berikut:
Setelah itu, silahkan lanjutkan membuat view. 3. Membuat View Form UploadBuatlah view baru di dalam folder
Pada view ini kita menggunakan form dengan Berikut ini tampilannya: Mari kita coba lakukan upload! 4. PercobaanPercobaan tidak mengisi file: Cobalah lakukan upload, tanpa mengisi input file. Maka hasilnya akan error seperti ini: Percobaan upload file yang bukan gambar: Percobaan upload file yang melewati batas ukuran: Percobaan upload file yang berhasil: Jika upload kita berhasil, maka akan ada file baru di dalam folder ..dan di dashboard pun akan ditampilkan. Mantap 👍 Kini user sudah bisa mengubah avatarnya. Lalu gimana kalau mau hapus avatar? Fitur ini belum kita buat. Karena itu, silahkan lanjut! 🧑💻 Latihan: Fitur untuk Menghapus AvatarUbahlah method
Pada method ini, kita menghapus file avatar dengan fungsi Kemudian, kita set ulang
nilai Mari kita coba lihat hasilnya: Yap berhasil.. Tapi ada satu lagi masalah: Saat user mengupload file dengan format yang berbeda, file yang tidak tercatat di kolom avatar tidak akan terhapus. Misalnya gini: Saat ganti avatar, user menguplaod foramt Nah yang akan dicatat di database adalah yang terakhir, yakni Jika kita melakukan
remove avatar, maka yang akan dihapus adalah avatar yang Sementara yang Lalu gimana solusinya? Solusinya: Kita bisa menghapus semua file berdasarkan id user, tanpa memperdulikan formatnya. Kita bisa ikuti nama file seperti saat melakukan proses upload. Contoh fungsinya seperti ini:
Fungsi Variabel Fungsi Pada fungsi di atas, kita melakukan mapping fungsi Oke.. Mari kita terapkan dalam aplikasi. Ubahlah method
Kemudian, silahkan coba remove avatar.. maka semua avatar akan dihapus walaupun di sana ada lebih dari satu format yang berbeda. Apa Selanjutnya?Kita sudah berhasil membuat fitur ubah avatar untuk user. Sebenarnya masih ada yang perlu di-improve di fitur ini seperti: Melakukan Crop Image sebelum Upload (di sisi client) atau bisa juga sesudah upload (di sisi server). Untuk crop image di sisi client, bisa coba pakai Cropper.js dan untuk sisi server, bisa pakai Library Image Manipulation dari Codeigniter. Tutorial selanjutnya:
Source code tutorial ini bisa didownload di Github: [🎁 Download Source Code] |