Tutorial Upload File Dengan CodeIgniter

 

Upload File Menggunakan CodeIgniter

Upload file menggunakan CodeIgniter memiliki dua bagian utama yaitu, frontend dan backend. 

Untuk bagian frontend dibuat menggunakan form HTML dengan tipe file input form. Sedangkan pada bagian backend, menggunakan library upload file untuk memproses input file yang dikirim dari form dan menyimpan file ke dalam direktori upload.

Pada panduan ini kami menggunakan localhost XAMPP untuk menjalankan web server. Berikut ini langkah-langkah membuat upload file menggunakan CodeIgniter.

Langkah 1: Download dan Konfigurasi File Codeigniter

Hal yang pertama kali harus Anda lakukan adalah akses website resmi CodeIgniter. Di sini, Anda perlu download file CodeIgniter. 

Pada halaman download CodeIgniter terdapat pilihan versi CodeIgniter. Seperti gambar di bawah ini.

Pada panduan ini kami akan menggunakan versi CodeIgniter 3. Versi ini dipilih karena penggunaannya yang lebih mudah dibanding versi CodeIgniter lainnya. 

Langsung saja klik Download dan tunggu hingga proses download selesai.

Setelah proses download selesai, extract file zip CodeIgniter dengan cara klik kanan lalu pilih Extract All. Tampilannya seperti gambar di bawah ini.

Kemudian, copy folder CodeIgniter hasil extract ke dalam folder xampp/htdocs. Rename folder CodeIgniter agar mudah diakses saat menjalankannya di localhost XAMPP. 

Pada panduan ini kami mengubah nama folder CodeIgniter menjadi firstapp.

Selanjutnya agar CodeIgniter dapat diakses, jalankan XAMPP caranya klik Start pada module Apache dan MySQL. untuk menjalankan web server dan database. 

Selanjutnya pastikan CodeIgniter bisa diakses di localhost komputer Anda. Untuk mengakses CodeIgniter di localhost, caranya masukkan url localhost ke web browser Anda. Seperti contoh gambar di bawah ini.

Langkah 2: Buat Folder Upload

Setelah Anda berhasil melakukan download dan konfigurasi file Codeigniter. Selanjutnya buka folder CodeIgniter. Lalu, buat folder baru dengan nama “upload”.

Folder “upload” digunakan untuk menyimpan semua file image, dokumen, pdf, dan lain-lain.

Langkah 3: Create Controller

Selanjutnya masuk ke folder CodeIgniter, cari folder application > controllers. Setelah Anda masuk ke dalam folder controllers kemudian buat file dengan nama ImageUpload_Controller.php. File tersebut digunakan sebagai backend website yang jadi kerangka dan mesin website. 

Agar file tersebut berfungsi sebagai kerangka dan mesin website, tambahkan kode berikut ke dalam file ImageUpload_Controller.php 

<?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'] = './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);
        }
    }
 
}
?>

Kemudian save menggunakan shortcut keyboard Ctrl+S.

Langkah 4: Create View

Setelah Anda membuat bagian backend di controllers CodeIgniter, Anda harus membuat tampilan frontend upload file pada folder Views. Lokasi folder View ada di application > views.

Kemudian buat dua file baru di dalam folder views. Beri dua folder itu dengan nama imageupload_form.php dan imageupload_success.php. Kedua folder tersebut memiliki kegunaan sebagai berikut:

• Imageupload_form.php: File ini menampilkan dua tipe data input file, yaitu pilih file dan upload Berisi tampilan formulir HTML yang memiliki tipe data input file.
• Imageupload_success.php: Menampilkan hasil gambar yang diupload. File ini juga menampilkan link yang bisa Anda klik untuk melihat hasil upload.

Tambahkan kode berikut ke dalam file Imageupload_form.php

<!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' />"; ?>
    <?php echo "<input type='submit' name='submit' value='upload' /> ";?>
    <?php echo "</form>"?>
</body>
</body>
</html>

Lalu tambahkan kode berikut ke dalam file Imageupload_success.php

<!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!!!, gambar telah 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>

Kemudian save kedua file menggunakan shortcut keyboard Ctrl+S.

Cek Apakah Upload File CodeIgniter Berhasil 

Untuk menguji apakah CodeIgniter bisa dipakai untuk upload file, Anda dapat mengakses url localhost di web browser Anda. Seperti contoh gambar di bawah ini.

Pada url di atas, firstapp adalah nama dari folder CodeIgniter. Jadi Anda bisa menyesuaikan url tersebut dengan nama folder CodeIgniter yang telah Anda buat.

Kemudian klik Pilih File untuk memilih gambar/file yang ingin Anda upload. Lalu klik Upload untuk mengunggah file ke server.

Apabila proses upload berhasil maka Anda akan mendapatkan tampilan seperti gambar di bawah ini.

Untuk melihat Image yang baru saja Anda upload klik View My Image. Untuk kembali ke halaman upload file klik Go back to Image Upload.

Selesai! Anda telah berhasil membuat website upload file dengan menggunakan framework CodeIgniter. Bagaimana mudah bukan?

Sudah Bisa Upload File CodeIgniter, Terus Apa Lagi? 

Pada panduan ini Anda telah berhasil membuat fitur upload file website. Namun, kode dan tampilan dari website diatas tentu belum sempurna. Anda harus membuat interface yang lebih menarik dengan menggunakan CSS atau bootstrap. Agar tampilan website yang Anda buat tidak membosankan.

Demikian tutorial membuat fitur upload file di website dengan framework CodeIgniter. Jika Anda memerlukan bantuan dalam memahami kode atau mengintegrasikan kode ke dalam aplikasi CodeIgniter, Anda bisa meninggalkan pertanyaan di kolom komentar di bawah ini.