Ariffud Muhammad Ariffud is a Technical Content Writer with an educational background in Informatics. He has extensive expertise in Linux and VPS, authoring over 200 articles on server management and web development. Follow him on LinkedIn.

Cara Membuat Upload File dengan CodeIgniter [Tutorial Lengkap]

6 min read

upload file codeigniter

Anda mencari tutorial cara membuat upload file dengan CodeIgniter? Selamat, Anda berada di tempat yang tepat!

CodeIgniter adalah salah satu framework PHP terbaik dan terpopuler saat ini. Selain mudah dipelajari, CodeIgniter menyediakan berbagai fitur untuk menunjang kebutuhan Anda, salah satunya fitur upload file.

Untuk membuat file upload CodeIgniter, Anda perlu merancang dua bagian: bagian depan website (front end) untuk mengatur tampilan upload, serta bagian belakang website (back end) untuk mengelola proses upload.

Setelah membaca artikel ini, Anda pun dapat membuat file upload di framework CodeIgniter secara mandiri. Penasaran ingin praktik langsung? Ini dia tutorial lengkapnya untuk Anda!

CTA banner web hosting

Persiapan Sebelum Upload File dengan CodeIgniter

Sebelum belajar CodeIgniter untuk upload file, ada beberapa hal yang perlu Anda persiapkan:

1. File Website CodeIgniter

Persiapkan sebuah file project CodeIgniter untuk mempraktikkan tutorial upload file. Jika belum punya, Anda dapat mendownload file CodeIgniter melalui website resminya.

2. Server Website (Lokal atau Online)

Anda dapat mempraktikkan tutorial ini secara offline maupun online. Jika memilih offline, Anda perlu menggunakan XAMPP. Setelah itu, ekstrak file CodeIgniter dan tempatkan di dalam directory htdocs.

folder project codeigniter di dalam directory htdocs xampp

Untuk praktik secara online, Anda dapat beli hosting terlebih dahulu. Setelah itu, pelajari panduan cara install CodeIgniter di hosting untuk mengonlinekan website Anda.

3. Text Editor

Persiapkan juga sebuah aplikasi text editor untuk mengedit script CodeIgniter. Untuk praktik offline, silakan install software PHP editor terbaik. Sementara pada tutorial online, Anda dapat menggunakan text editor bawaan cPanel.

Jika sudah menyiapkan hal-hal di atas, mari langsung menuju poin selanjutnya!

Ingin praktik CodeIgniter online? Segera klik tombol di bawah!

Cara Membuat Upload File dengan CodeIgniter

Langkah-langkah membuat upload file dengan CodeIgniter adalah sebagai berikut:

  1. Persiapkan folder upload.
  2. Buat file controller upload.
  3. Atur controller default (opsional).
  4. Buat file view (tampilan)
  5. Uji coba upload file dengan CodeIgniter.

Yuk praktik cara membuat upload file dengan CodeIgniter mulai dari tahap yang pertama!

1. Persiapkan Folder Upload CodeIgniter

Langkah pertama dalam membuat upload file dengan CodeIgniter adalah menyiapkan folder upload. Folder ini digunakan untuk menyimpan semua file yang Anda unggah pada website CodeIgniter.

Untuk membuat folder, pertama buka directory project CodeIgniter Anda. Setelah itu, buat folder baru bernama upload. Ingat, folder baru ini harus satu baris dengan folder application dan system.

membuat folder upload pada codeigniter

Catatan: Anda dapat menamai folder di atas sesuka hati. Namun, pastikan Anda mengingat namanya karena akan digunakan pada tahap-tahap berikutnya.

2. Buat File Controller Upload

Cara membuat upload file dengan CodeIgniter dilanjutkan dengan membuat controller upload. Controller ini berfungsi untuk mengonfigurasi dan mengelola proses upload file, baik ketika berhasil maupun gagal saat mengunggah file.

Untuk membuat controller, silakan buka directory application > controllers. Setelah itu, buatlah sebuah file baru bernama ImageUpload_Controller.php.

membuat controller sebagai cara membuat upload file dengan codeigniter

Catatan: Pastikan penulisan nama file controller Anda benar. Sebab, controller sensitif terhadap besar kecilnya huruf (case sensitive).

Jika sudah, silakan buka file ImageUpload_Controller.php dengan text editor. Kemudian, salin dan tempel script PHP berikut ke dalamnya:

<?php 
class ImageUpload_Controller extends CI_Controller
{
    function __construct()
    {
    parent::__construct();
    //load Helper for Form
    $this->load->helper('url', 'form'); 
    $this->load->library('form_validation');
    }
    function index()
    {
        $this->load->view('imageupload_form');
    }
    public function upload() 
    {
        $config['upload_path'] = FCPATH.'/upload/';
        $config['allowed_types'] = 'gif|jpg|png';
        $config['max_size'] = 2000;
 
 
        $this->load->library('upload', $config);
 
        if (!$this->upload->do_upload('profile_pic')) 
        {
            $error = array('error' => $this->upload->display_errors());
 
            $this->load->view('imageupload_form', $error);
        } 
        else 
        {
            $data = array('image_metadata' => $this->upload->data());
 
            $this->load->view('imageupload_success', $data);
        }
    }
 
}
?>
script file imageupload_controller.php dalam file upload codeigniter
Script lengkap file controller ImageUpload_Controller.php

Selesai menambahkan kode pada file ImageUpload_Controller.php, simpan perubahan dengan menekan kombinasi tombol Ctrl + S pada keyboard.

Bagi Anda yang belum paham, berikut penjelasan bagian-bagian penting dari script di atas:

function index()
    {
        $this->load->view('imageupload_form');
    }

Bagian ini berfungsi untuk menampilkan view imageupload_form apabila Anda akan mengupload file.

 public function upload() 
    {
        $config['upload_path'] = FCPATH.'/upload/';
        $config['allowed_types'] = 'gif|jpg|png';
        $config['max_size'] = 2000;

Fungsi upload () digunakan untuk mengonfigurasi proses upload file. Di dalam fungsi ini, terdapat tiga konfigurasi lanjutan untuk data file, yaitu:

  • upload_path – Lokasi penyimpanan file yang Anda upload. Baris kode ini menggunakan konstanta FCPATH, di mana FCPATH adalah konstanta yang menunjukkan alamat path untuk folder upload.
  • allowed_types – Ekstensi atau tipe file yang dapat diupload, dalam hal ini yaitu ekstensi file gambar (.gif, .jpg, dan .png).
  • max_size – Maksimal ukuran file yang dapat diupload dalam kilobyte, pada tutorial ini yaitu 2000 KB.
$this->load->library('upload', $config);

Masih di dalam fungsi upload (), terdapat baris kode untuk memuat library upload CI. Dengan library ini, Anda dapat mengunggah file dengan lancar pada CodeIgniter.

if (!$this->upload->do_upload('profile_pic')) 
        {
            $error = array('error' => $this->upload->display_errors());
 
            $this->load->view('imageupload_form', $error);

Percabangan if berfungsi untuk mengakomodasi kondisi upload file gagal, misalnya karena format file salah atau ukuran terlalu besar. Jika terjadi demikian, CodeIgniter akan menampilkan pesan error dan mengembalikan Anda ke view imageupload_form.

else 
        {
            $data = array('image_metadata' => $this->upload->data());
 
            $this->load->view('imageupload_success', $data);
        }

Percabangan else digunakan untuk memfasilitasi kondisi upload file berhasil. Pada kondisi ini, file berhasil tersimpan ke folder upload dan Anda akan diarahkan menuju view imageupload_success.

3. Atur Controller Default (Opsional)

Langkah membuat fitur upload file dengan CodeIgniter bagian ini sebenarnya opsional. Jika Anda menggunakan beberapa controller sekaligus atau memiliki sebuah controller default, silakan lompat ke poin selanjutnya.

Namun jika hanya memiliki sebuah file controller yang dibuat pada tahap sebelumnya, Anda perlu menjadikan file ImageUpload_Controller.php ini sebagai controller default. Kami akan menjelaskan caranya.

Pertama, buka folder application > config. Kemudian, buka file routes.php melalui aplikasi text editor.

file routes.php di dalam folder config codeigniter

Jika sudah, temukan bagian seperti di bawah ini lalu edit value $route[‘default_controller’] = ‘welcome’  menjadi $route[‘default_controller’] = ‘imageupload_controller’.

mengedit script file routes.php untuk mengatur controller default
Mengganti controller default menjadi ImageUpload_Controller pada file routes.php

Simpan perubahan yang baru saja Anda lakukan.

4. Buat File View (Tampilan)

Cara membuat file upload CodeIgniter tahap berikutnya adalah membuat dua view atau tampilan dengan rincian sebagai berikut:

  • Imageupload_form.php – File ini berfungsi untuk menampilkan form upload file. Di sini, Anda dapat mengunggah file gambar ke folder upload pada CodeIgniter.
  • Imageupload_success.php – File ini digunakan untuk menampilkan link hasil upload gambar yang telah diupload serta tautan menuju view sebelumnya.

Untuk membuat view baru, silakan buka folder application > views. Kemudian, buatlah view pertama Imageupload_form.php. Jika sudah, tambahkan script di bawah pada file tersebut:

<!DOCTYPE html>
<html>
<head>
    <title>Upload Image di Codeigniter</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h3>Pilih gambar dari komputer Anda dan klik UPLOAD</h3>
    <?php echo @$error; ?> 
    <?php echo form_open_multipart('ImageUpload_Controller/upload');?>
    <?php echo "<input type='file' name='profile_pic' size='20' />"; ?>
    <br>
    <br>
    <?php echo "<input type='submit' name='submit' value='UPLOAD' /> ";?>
    <?php echo "</form>"?>
</body>
</body>
</html>
script file imageupload_form.php dalam upload foto dengan codeigniter
Script lengkap file Imageupload_form.php

Simpan file dengan menekan tombol Ctrl + S di keyboard.

Berikut penjelasan script yang baru saja Anda tambahkan:

<?php echo form_open_multipart('ImageUpload_Controller/upload');?>

Baris ini digunakan untuk membuka form upload file melalui controller ImageUpload_Controller dengan fungsi upload ().

<?php echo "<input type='file' name='profile_pic' size='20' />"; ?>

Bagian ini merupakan placeholder di mana Anda dapat mencari di komputer untuk menemukan file yang akan diupload.

<?php echo "<input type='submit' name='submit' value='upload' /> ";?>

Script ini berisi tombol yang berfungsi untuk mengunggah file gambar Anda pada website CodeIgniter.

Selesai dengan view pertama, mari lanjutkan dengan membuat view kedua yakni Imageupload_success.php. Silakan copy dan paste script berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Image Uploaded Success</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
        <h3>Selamat! File Anda berhasil diupload</h3>
        <p>Klik di sini untuk melihat gambar yang baru saja Anda upload
            <?=anchor('upload/'.$image_metadata['file_name'], 'View My Image!')?>
        </p>
 
        <p>
            <?php echo anchor('ImageUpload_Controller', 'Go back to Image Upload'); ?>
        </p>
    </div>
</body>
</html>
script file imageupload_success.php dalam cara membuat upload file dengan codeigniter
Script lengkap file Imageupload_success.php

Seperti biasa, silakan simpan file yang satu ini.

Ini dia penjelasan script file Imageupload_success.php:

<?=anchor('upload/'.$image_metadata['file_name'], 'View My Image!')?>

Bagian ini digunakan untuk menampilkan link berisi file gambar yang baru saja Anda unggah.

<?php echo anchor('ImageUpload_Controller', 'Go back to Image Upload'); ?>

Script di atas memberikan Anda opsi untuk menuju halaman form upload file sebelumnya.

5. Uji Coba Upload File dengan CodeIgniter

Pada tahap terakhir tutorial membuat upload file dengan CodeIgniter, Anda dapat memeriksa apakah proses upload gambar berhasil. Untuk itu, ikutilah langkah-langkah berikut:

Pertama, buka browser Anda. Kemudian, tuliskan localhost/codeigniter (untuk tutorial offline) atau IP hosting Anda/codeigniter (untuk metode online) pada kolom alamat browser.

Jika sudah, Anda akan melihat tampilan view Imageupload_form.php seperti di bawah. Silakan unggah gambar Anda lalu klik tombol Upload.

tampilan halaman file upload codeigniter

Jika proses upload berhasil, Anda akan diarahkan menuju view Imageupload_success. Di sini, silakan klik pada View my image untuk melihat hasil gambar Anda.

gambar berhasil diupload setelah upload foto dengan codeigniter

Beginilah tampilan gambar pada browser:

tampilan gambar dalam browser

Jika Anda mengupload file selain gambar, atau ukuran gambar tidak sesuai ketentuan, maka begini output yang muncul di layar:

tampilan gagal upload file jika ekstensi tidak tepat

Sampai di sini, Anda telah mempraktikkan tutorial upload foto dengan CodeIgniter 3. Bagaimana, mudah sekali bukan?

Sudah Berhasil Upload File CodeIgniter, Selanjutnya Apa?

Pada artikel ini, Anda sudah belajar cara membuat upload file dengan CodeIgniter melalui lima langkah sederhana. Dengan menambahkan fitur upload, Anda dapat dengan leluasa mengunggah file ke dalam website CodeIgniter.

Setelah berhasil mengimplementasikan upload gambar, Anda dapat memanfaatkan fleksibilitas CodeIgniter untuk menambahkan fitur-fitur lain. Misalnya seperti otentikasi pengguna, pengelolaan session, pengiriman email, hingga integrasi dengan API pihak ketiga.

Namun perlu diingat, fitur-fitur di atas dapat dinikmati secara optimal ketika website sudah online. Maka dari itu, penting bagi Anda untuk memilih layanan hosting berkualitas yang mendukung CodeIgniter, seperti Niagahoster.

Niagahoster menyediakan layanan Unlimited Hosting dengan fitur lengkap dan performa unggul untuk mengakomodasi website CodeIgniter Anda. Sebut saja ketersediaan berbagai versi PHP yang mendukung CodeIgniter, atau MySQL untuk mengelola database.

Layanan ini juga diperkuat teknologi LiteSpeed Web Server yang meningkatkan akses website, Imunify360 untuk melindungi website dari serangan berbahaya, serta jaminan Uptime 99.99% agar website Anda selalu online. Menarik banget, kan? Jadi tunggu apa lagi, yuk bangun website CodeIgniter Anda dengan hosting terbaik Niagahoster!

Ariffud Muhammad Ariffud is a Technical Content Writer with an educational background in Informatics. He has extensive expertise in Linux and VPS, authoring over 200 articles on server management and web development. Follow him on LinkedIn.

2 Replies to “Cara Membuat Upload File dengan CodeIgniter [Tutorial Lengkap]”

  1. Oke mas terima kasih sharingnya
    Kesulitan saya menampilkan hasil file upload pdf e mas.
    Gimana codingnya supaya file tsb di tabel bisa muncul nama file dan di kolom aksi, bisa di open in new tab.
    Terima kasih

    1. Hai, kak. Untuk membuat upload file untuk format pdf bisa diganti parameter di file type seperti di bawah, ya.
      $config[‘allowed_types’] = ‘pdf’;

Leave a Reply

Your email address will not be published. Required fields are marked *