Belajar CodeIgniter #11: Cara Membuat Fitur Upload File dengan Mudah

21 Februari 2025

Belajar CodeIgniter #11: Cara Membuat Fitur Upload File dengan Mudah

Belajar CodeIgniter #11 - Halo, teman-teman! Selamat datang kembali di seri Belajar CodeIgniter. Pada tutorial sebelumnya, kita sudah berhasil membuat fitur edit profile. Namun, fitur tersebut masih belum lengkap karena user hanya bisa mengedit data dan password saja. Nah, kali ini kita akan melengkapi fitur tersebut dengan menambahkan kemampuan untuk mengupload avatar. Yuk, simak langkah-langkahnya!

Apa yang Akan Kita Pelajari?

Pada artikel Belajar CodeIgniter kali ini, kita akan membahas cara membuat fitur upload file menggunakan library upload bawaan CodeIgniter. Fitur ini akan memungkinkan user untuk mengupload gambar avatar mereka. Meskipun kita bisa menggunakan fitur upload bawaan PHP, library CodeIgniter menawarkan kemudahan dan keamanan yang lebih baik. Jadi, kenapa tidak memanfaatkannya?

Apa Itu Library Upload di CodeIgniter?

Library upload adalah salah satu library bawaan CodeIgniter yang memudahkan kita dalam mengelola proses upload file. Library ini menyediakan berbagai konfigurasi seperti menentukan lokasi penyimpanan file, jenis file yang diizinkan, ukuran maksimal file, dan masih banyak lagi.

Untuk menggunakan library ini, kita perlu memuatnya dengan konfigurasi tertentu. Berikut contohnya:

$config['upload_path']          = './uploads/';
$config['allowed_types']        = 'gif|jpg|png';
$config['max_size']             = 100;
$config['max_width']            = 1024;
$config['max_height']           = 768;

$this->load->library('upload', $config);

Pada contoh di atas, kita menentukan:

upload_path: Lokasi penyimpanan file.
allowed_types: Jenis file yang diizinkan.
max_size: Ukuran maksimal file (dalam KB).
max_width dan max_height: Dimensi maksimal untuk file gambar.

Setelah library di-load, kita bisa melakukan proses upload dengan memanggil method do_upload(). Jika upload berhasil, kita bisa mengambil data file yang terupload menggunakan method data(). Jika gagal, kita bisa menampilkan pesan error dengan method display_errors().

Praktik: Membuat Fitur Upload Avatar

Mari kita langsung praktik dengan membuat fitur upload avatar pada project beritacoding yang sudah kita buat sebelumnya.

1. Membuat Controller untuk Upload Avatar

Pertama, buka controller Setting.php di folder admin. Ubah method upload_avatar() menjadi seperti ini:

public function upload_avatar() {
    $this->load->model('profile_model');
    $data['current_user'] = $this->auth_model->current_user();

    if ($this->input->method() === 'post') {
        $file_name = str_replace('.', '', $data['current_user']->id);
        $config['upload_path']          = FCPATH.'/upload/avatar/';
        $config['allowed_types']        = 'gif|jpg|jpeg|png';
        $config['file_name']            = $file_name;
        $config['overwrite']            = true;
        $config['max_size']             = 1024; // 1MB
        $config['max_width']            = 1080;
        $config['max_height']           = 1080;

        $this->load->library('upload', $config);

        if (!$this->upload->do_upload('avatar')) {
            $data['error'] = $this->upload->display_errors();
        } else {
            $uploaded_data = $this->upload->data();

            $new_data = [
                'id' => $data['current_user']->id,
                'avatar' => $uploaded_data['file_name'],
            ];

            if ($this->profile_model->update($new_data)) {
                $this->session->set_flashdata('message', 'Avatar updated!');
                redirect(site_url('admin/setting'));
            }
        }
    }

    $this->load->view('admin/setting_upload_avatar.php', $data);
}

2. Membuat Folder Upload

Buat folder baru di dalam project dengan nama upload. Di dalam folder tersebut, buat lagi folder bernama avatar. Pastikan folder ini memiliki hak akses yang memungkinkan proses upload file.

3. Membuat View Form Upload

Buat file view baru di folder views/admin dengan nama setting_upload_avatar.php. Isi file tersebut dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <?php $this->load->view('admin/_partials/head.php') ?>
</head>
<body>
    <main class="main">
        <?php $this->load->view('admin/_partials/side_nav.php') ?>

        <div class="content">
            <h1>Upload Avatar</h1>

            <form action="" method="POST" enctype="multipart/form-data">
                <div>
                    <label for="avatar">Pilih Gambar Avatar</label>
                    <input type="file" name="avatar" id="avatar" accept="image/png, image/jpeg, image/jpg, image/gif">
                </div>

                <?php if (isset($error)) : ?>
                    <div class="invalid-feedback"><?= $error ?></div>
                <?php endif; ?>

                <div>
                    <button type="submit" name="save" class="button button-primary">Upload</button>
                </div>
            </form>

            <?php $this->load->view('admin/_partials/footer.php') ?>
        </div>
    </main>
</body>
</html>

4. Percobaan Upload File

Setelah semua selesai, coba lakukan upload file dengan berbagai skenario:

Tanpa memilih file.
Mengupload file yang bukan gambar.
Mengupload file dengan ukuran melebihi batas.
Mengupload file yang sesuai.

Jika berhasil, file akan tersimpan di folder upload/avatar dan avatar user akan diperbarui.

Menambahkan Fitur Hapus Avatar

Agar fitur upload avatar lebih lengkap, kita juga perlu menambahkan kemampuan untuk menghapus avatar. Berikut caranya:

public function remove_avatar() {
    $current_user = $this->auth_model->current_user();
    $this->load->model('profile_model');

    // Hapus file
    $file_name = str_replace('.', '', $current_user->id);
    array_map('unlink', glob(FCPATH."/upload/avatar/$file_name.*"));

    // Set avatar menjadi null
    $new_data = [
        'id' => $current_user->id,
        'avatar' => null,
    ];

    if ($this->profile_model->update($new_data)) {
        $this->session->set_flashdata('message', 'Avatar dihapus!');
        redirect(site_url('admin/setting'));
    }
}

Dengan ini, user bisa menghapus avatar mereka dengan mudah.

Kesimpulan

Dalam seri Belajar CodeIgniter kali ini, kita telah berhasil membuat fitur upload file, khususnya untuk mengupload avatar user. Dengan memanfaatkan library upload bawaan CodeIgniter, proses upload menjadi lebih mudah dan aman. Kita juga menambahkan fitur hapus avatar untuk melengkapi fungsionalitas tersebut.

Beberapa poin penting yang telah kita pelajari:

Library Upload CodeIgniter: Memudahkan proses upload file dengan berbagai konfigurasi seperti lokasi penyimpanan, jenis file, dan ukuran file.
Fitur Upload Avatar: User dapat mengupload gambar avatar mereka dengan batasan tertentu.
Fitur Hapus Avatar: User juga bisa menghapus avatar mereka jika diperlukan.

Meskipun fitur ini sudah berfungsi dengan baik, masih banyak ruang untuk pengembangan, seperti menambahkan fitur crop gambar atau optimasi ukuran file. Jadi, jangan berhenti belajar dan terus eksplorasi fitur-fitur menarik lainnya di CodeIgniter!

Nah, buat kalian yang masih penasaran atau punya pertanyaan seputar Belajar CodeIgniter, jangan ragu untuk bergabung di komunitas Codepolitan! Di sini, kalian bisa bertanya, berdiskusi, atau bahkan berbagi ilmu dengan sesama developer. Yuk, mulai berkontribusi sekarang! 🚀