cara membuat insert ajax upload di codeigniter 3

mari kita buat contoh implementasi insert data dengan AJAX dan upload file di CodeIgniter 3. Kita akan membuat form sederhana untuk mengunggah gambar bersama dengan beberapa data teks.

Konsep Utama

CodeIgniter 3 (CI3): Framework PHP yang digunakan.
AJAX (Asynchronous JavaScript and XML): Untuk mengirimkan data form, termasuk file, ke server tanpa me-reload halaman. Kita akan menggunakan objek FormData untuk ini.
Library Upload CodeIgniter: Digunakan untuk menangani proses upload file dengan aman dan efisien di sisi server.

Struktur Proyek

Asumsikan Anda sudah memiliki instalasi CodeIgniter 3 yang berfungsi. Kita akan fokus pada bagian-bagian penting:

your_project/
├── application/
│   ├── config/
│   ├── controllers/
│   │   └── Upload_data.php
│   ├── models/
│   │   └── Upload_model.php
│   ├── views/
│   │   └── upload/
│   │       └── form_upload.php
│   └── ...
├── assets/
│   ├── js/
│   │   └── upload_script.js
│   ├── img/ (folder untuk menyimpan gambar yang diupload)
│   └── ...
├── system/
└── index.php

your_project/

├── application/

│ ├── config/

│ ├── controllers/

│ │ └── Upload_data.php

│ ├── models/

│ │ └── Upload_model.php

│ ├── views/

│ │ └── upload/

│ │ └── form_upload.php

│ └── ...

├── assets/

│ ├── js/

│ │ └── upload_script.js

│ ├── img/ (folder untuk menyimpan gambar yang diupload)

│ └── ...

├── system/

└── index.php

Persiapan Database

Kita akan membuat tabel sederhana untuk menyimpan nama data dan nama file gambar yang diunggah.

Tabel: data_upload

CREATE TABLE `data_upload` (
    `id` INT(11) NOT NULL AUTO_INCREMENT,
    `nama_data` VARCHAR(255) NOT NULL,
    `nama_file_gambar` VARCHAR(255) DEFAULT NULL,
    PRIMARY KEY (`id`)
);

CREATE TABLE `data_upload` (

`id` INT(11) NOT NULL AUTO_INCREMENT,

`nama_data` VARCHAR(255) NOT NULL,

`nama_file_gambar` VARCHAR(255) DEFAULT NULL,

PRIMARY KEY (`id`)

);

Langkah-langkah Implementasi

1. Konfigurasi CodeIgniter

application/config/autoload.php: Pastikan library yang dibutuhkan sudah di-load.

$autoload['libraries'] = array('database', 'form_validation', 'session', 'upload');
$autoload['helper'] = array('url', 'form', 'file'); // Tambahkan 'file' helper jika belum ada

1 2	$autoload['libraries'] = array('database', 'form_validation', 'session', 'upload'); $autoload['helper'] = array('url', 'form', 'file'); // Tambahkan 'file' helper jika belum ada

application/config/database.php: Sesuaikan konfigurasi database Anda.

2. Model (`application/models/Upload_model.php`)

Model ini akan bertanggung jawab untuk menyimpan nama data dan nama file gambar ke database.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Upload_model extends CI_Model {

    public function __construct() {
        parent::__construct();
        $this->load->database();
    }

    public function insert_data($data) {
        return $this->db->insert('data_upload', $data);
    }
}

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Upload_model extends CI_Model {

public function __construct() {

parent::__construct();

$this->load->database();

}

public function insert_data($data) {

return $this->db->insert('data_upload', $data);

}

3. Controller (`application/controllers/Upload_data.php`)

Controller ini akan menangani tampilan form dan logika proses upload serta penyimpanan data.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Upload_data extends CI_Controller {

    public function __construct() {
        parent::__construct();
        $this->load->model('Upload_model');
        $this->load->helper('url'); // Pastikan url helper dimuat untuk base_url()
    }

    public function index() {
        $this->load->view('upload/form_upload');
    }

    public function do_upload_ajax() {
        // Validasi input teks
        $this->form_validation->set_rules('nama_data', 'Nama Data', 'required|trim');

        if ($this->form_validation->run() == FALSE) {
            // Jika validasi teks gagal
            echo json_encode(array(
                "status" => FALSE,
                "message" => validation_errors()
            ));
            return;
        }

        $config['upload_path']   = './assets/img/'; // Folder tempat menyimpan file
        $config['allowed_types'] = 'gif|jpg|png|jpeg'; // Tipe file yang diizinkan
        $config['max_size']      = 2048; // Ukuran maksimum (2MB)
        $config['max_width']     = 1024; // Lebar maksimum gambar
        $config['max_height']    = 768; // Tinggi maksimum gambar
        $config['file_name']     = round(microtime(true) * 1000); // Nama file unik (timestamp)

        $this->load->library('upload', $config);
        $this->upload->initialize($config); // Penting jika Anda menggunakan config yang berbeda di tempat lain

        $data_to_insert = array(
            'nama_data' => $this->input->post('nama_data')
        );

        if (!empty($_FILES['file_gambar']['name'])) {
            if ($this->upload->do_upload('file_gambar')) {
                $upload_data = $this->upload->data();
                $data_to_insert['nama_file_gambar'] = $upload_data['file_name'];
            } else {
                // Jika upload gambar gagal
                echo json_encode(array(
                    "status" => FALSE,
                    "message" => $this->upload->display_errors()
                ));
                return;
            }
        } else {
            // Jika tidak ada file gambar diupload (ini opsional, tergantung kebutuhan)
            $data_to_insert['nama_file_gambar'] = NULL; // Atau biarkan kosong jika kolom di DB bisa NULL
        }

        // Simpan data ke database
        if ($this->Upload_model->insert_data($data_to_insert)) {
            echo json_encode(array(
                "status" => TRUE,
                "message" => "Data dan file berhasil diunggah!"
            ));
        } else {
            // Jika penyimpanan data ke DB gagal
            echo json_encode(array(
                "status" => FALSE,
                "message" => "Gagal menyimpan data ke database."
            ));
        }
    }
}

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Upload_data extends CI_Controller {

public function __construct() {

parent::__construct();

$this->load->model('Upload_model');

$this->load->helper('url'); // Pastikan url helper dimuat untuk base_url()

}

public function index() {

$this->load->view('upload/form_upload');

}

public function do_upload_ajax() {

// Validasi input teks

$this->form_validation->set_rules('nama_data', 'Nama Data', 'required|trim');

if ($this->form_validation->run() == FALSE) {

// Jika validasi teks gagal

echo json_encode(array(

"status" => FALSE,

"message" => validation_errors()

));

return;

}

$config['upload_path'] = './assets/img/'; // Folder tempat menyimpan file

$config['allowed_types'] = 'gif|jpg|png|jpeg'; // Tipe file yang diizinkan

$config['max_size'] = 2048; // Ukuran maksimum (2MB)

$config['max_width'] = 1024; // Lebar maksimum gambar

$config['max_height'] = 768; // Tinggi maksimum gambar

$config['file_name'] = round(microtime(true) * 1000); // Nama file unik (timestamp)

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

$this->upload->initialize($config); // Penting jika Anda menggunakan config yang berbeda di tempat lain

$data_to_insert = array(

'nama_data' => $this->input->post('nama_data')

);

if (!empty($_FILES['file_gambar']['name'])) {

if ($this->upload->do_upload('file_gambar')) {

$upload_data = $this->upload->data();

$data_to_insert['nama_file_gambar'] = $upload_data['file_name'];

} else {

// Jika upload gambar gagal

echo json_encode(array(

"status" => FALSE,

"message" => $this->upload->display_errors()

));

return;

}

} else {

// Jika tidak ada file gambar diupload (ini opsional, tergantung kebutuhan)

$data_to_insert['nama_file_gambar'] = NULL; // Atau biarkan kosong jika kolom di DB bisa NULL

}

// Simpan data ke database

if ($this->Upload_model->insert_data($data_to_insert)) {

echo json_encode(array(

"status" => TRUE,

"message" => "Data dan file berhasil diunggah!"

));

} else {

// Jika penyimpanan data ke DB gagal

echo json_encode(array(

"status" => FALSE,

"message" => "Gagal menyimpan data ke database."

));

}

4. View (`application/views/upload/form_upload.php`)

Ini adalah tampilan form HTML tempat pengguna akan menginput data dan memilih file.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Upload Data AJAX CodeIgniter</title>
    <link href="<?php echo base_url('assets/css/bootstrap.min.css')?>" rel="stylesheet">
    <style>
        .container {
            margin-top: 50px;
        }
        .alert {
            display: none; /* Sembunyikan alert secara default */
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 style="font-size:20pt">Form Upload Data dengan AJAX</h1>
        <hr>

        <div id="alert_placeholder"></div> <form id="uploadForm" method="post" enctype="multipart/form-data">
            <div class="form-group">
                <label for="nama_data">Nama Data:</label>
                <input type="text" class="form-control" id="nama_data" name="nama_data" placeholder="Masukkan nama data">
            </div>
            <div class="form-group">
                <label for="file_gambar">Pilih Gambar:</label>
                <input type="file" class="form-control-file" id="file_gambar" name="file_gambar">
                <small class="form-text text-muted">Hanya file gambar (JPG, PNG, GIF) dengan ukuran maksimal 2MB.</small>
            </div>
            <button type="submit" class="btn btn-primary" id="btnUpload">Upload Data</button>
        </form>

        <br>
        <div id="response_message"></div> </div>

    <script src="<?php echo base_url('assets/js/jquery-3.7.1.min.js')?>"></script>
    <script src="<?php echo base_url('assets/js/bootstrap.min.js')?>"></script>
    <script src="<?php echo base_url('assets/js/upload_script.js')?>"></script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Upload Data AJAX CodeIgniter</title>

<style>

.container {

margin-top: 50px;

}

.alert {

display: none; /* Sembunyikan alert secara default */

}

</style>

</head>

<body>

<h1 style="font-size:20pt">Form Upload Data dengan AJAX</h1>

<hr>

</div>

<label for="file_gambar">Pilih Gambar:</label>

<small class="form-text text-muted">Hanya file gambar (JPG, PNG, GIF) dengan ukuran maksimal 2MB.</small>

</div>

<button type="submit" class="btn btn-primary" id="btnUpload">Upload Data</button>

</form>

<br>

</body>

</html>

5. File JavaScript (`assets/js/upload_script.js`)

File ini akan berisi logika AJAX untuk mengirimkan form.

$(document).ready(function() {
    $('#uploadForm').on('submit', function(e) {
        e.preventDefault(); // Mencegah form submit secara default

        $('#btnUpload').text('Uploading...'); // Ganti teks tombol
        $('#btnUpload').attr('disabled', true); // Nonaktifkan tombol

        var formData = new FormData(this); // Mengambil semua data form, termasuk file

        $.ajax({
            url: '<?php echo site_url('upload_data/do_upload_ajax')?>', // URL controller
            type: 'POST',
            data: formData,
            contentType: false, // Penting! Jangan mengatur content-type saat menggunakan FormData
            processData: false, // Penting! Jangan memproses data saat menggunakan FormData
            dataType: 'JSON', // Mengharapkan respons dalam format JSON
            success: function(response) {
                $('#btnUpload').text('Upload Data'); // Kembalikan teks tombol
                $('#btnUpload').attr('disabled', false); // Aktifkan kembali tombol

                // Hapus pesan alert sebelumnya
                $('#alert_placeholder').empty();

                if (response.status) {
                    // Jika sukses
                    $('#alert_placeholder').html('<div class="alert alert-success alert-dismissible fade in" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button><strong>Sukses!</strong> ' + response.message + '</div>');
                    $('#uploadForm')[0].reset(); // Reset form setelah sukses
                } else {
                    // Jika gagal
                    $('#alert_placeholder').html('<div class="alert alert-danger alert-dismissible fade in" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button><strong>Gagal!</strong> ' + response.message + '</div>');
                }
                // Tampilkan alert
                $('#alert_placeholder .alert').fadeIn();
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $('#btnUpload').text('Upload Data'); // Kembalikan teks tombol
                $('#btnUpload').attr('disabled', false); // Aktifkan kembali tombol
                $('#alert_placeholder').html('<div class="alert alert-danger alert-dismissible fade in" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button><strong>Error!</strong> Terjadi kesalahan saat mengirim data ke server: ' + textStatus + ' - ' + errorThrown + '</div>');
                $('#alert_placeholder .alert').fadeIn();
                console.log(jqXHR.responseText); // Untuk debugging lebih lanjut
            }
        });
    });
});

$(document).ready(function() {

$('#uploadForm').on('submit', function(e) {

e.preventDefault(); // Mencegah form submit secara default

$('#btnUpload').text('Uploading...'); // Ganti teks tombol

$('#btnUpload').attr('disabled', true); // Nonaktifkan tombol

var formData = new FormData(this); // Mengambil semua data form, termasuk file

$.ajax({

url: '<?php echo site_url('upload_data/do_upload_ajax')?>', // URL controller

type: 'POST',

data: formData,

contentType: false, // Penting! Jangan mengatur content-type saat menggunakan FormData

processData: false, // Penting! Jangan memproses data saat menggunakan FormData

dataType: 'JSON', // Mengharapkan respons dalam format JSON

success: function(response) {

$('#btnUpload').text('Upload Data'); // Kembalikan teks tombol

$('#btnUpload').attr('disabled', false); // Aktifkan kembali tombol

// Hapus pesan alert sebelumnya

$('#alert_placeholder').empty();

if (response.status) {

// Jika sukses

$('#alert_placeholder').html('<div class="alert alert-success alert-dismissible fade in" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button><strong>Sukses!</strong> ' + response.message + '</div>');

$('#uploadForm')[0].reset(); // Reset form setelah sukses

} else {

// Jika gagal

$('#alert_placeholder').html('<div class="alert alert-danger alert-dismissible fade in" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button><strong>Gagal!</strong> ' + response.message + '</div>');

}

// Tampilkan alert

$('#alert_placeholder .alert').fadeIn();

error: function(jqXHR, textStatus, errorThrown) {

$('#btnUpload').text('Upload Data'); // Kembalikan teks tombol

$('#btnUpload').attr('disabled', false); // Aktifkan kembali tombol

$('#alert_placeholder .alert').fadeIn();

console.log(jqXHR.responseText); // Untuk debugging lebih lanjut

}

});

Cara Menjalankan

Unduh dan Instal CodeIgniter 3: Jika belum punya.
Buat Database dan Tabel: Gunakan skrip SQL data_upload di atas.
Konfigurasi CI: Sesuaikan database.php dan autoload.php.
Buat Folder assets: Buat folder assets/img dan assets/js di root proyek Anda. Pastikan folder assets/img memiliki izin tulis (write permission) agar CodeIgniter bisa menyimpan file di sana (misalnya, chmod 777 assets/img di Linux/macOS, atau berikan izin penuh di Windows).
Tempatkan File:
- Upload_data.php di application/controllers/
- Upload_model.php di application/models/
- form_upload.php di application/views/upload/ (buat folder upload di dalam views)
- upload_script.js di assets/js/
- Download jQuery dan Bootstrap (minimal versi CSS dan JS-nya saja), letakkan di assets/js dan assets/css. Sesuaikan path di form_upload.php jika berbeda. Anda bisa menggunakan versi mini/CDN jika ingin lebih praktis.
Akses Aplikasi: Buka browser dan navigasi ke http://localhost/your_project/index.php/upload_data (sesuaikan dengan URL proyek Anda).

Penjelasan Kode

HTML (form_upload.php):
- Form menggunakan enctype="multipart/form-data" yang wajib untuk upload file.
- Terdapat input text untuk nama_data dan input file untuk file_gambar.
- Ada placeholder untuk menampilkan pesan sukses atau error.
JavaScript (upload_script.js):
- Mencegah submit form bawaan (e.preventDefault()).
- Membuat objek FormData(this): Ini adalah kunci untuk mengirim data form yang berisi file via AJAX. FormData secara otomatis mengumpulkan semua input form, termasuk file.
- Pengaturan AJAX penting:
  - contentType: false: Memberi tahu jQuery untuk tidak mengatur Content-Type header, biarkan browser yang menentukannya (penting untuk upload file).
  - processData: false: Memberi tahu jQuery untuk tidak memproses data sebelum mengirimnya, biarkan FormData yang menangani.
- dataType: 'JSON': Mengharapkan respons dari server dalam format JSON.
- Menangani success dan error dari respons AJAX, menampilkan pesan ke pengguna, dan me-reset form jika sukses.
Controller (Upload_data.php):
- Method do_upload_ajax() adalah endpoint AJAX kita.
- Validasi Input Teks: Menggunakan form_validation untuk nama_data. Penting untuk memvalidasi data teks sebelum atau sesudah upload file.
- Konfigurasi Upload: Array $config mendefinisikan aturan untuk upload file (path, tipe diizinkan, ukuran, dll.).
- Inisialisasi Library Upload: $this->load->library('upload', $config); dan $this->upload->initialize($config);
- if (!empty($_FILES['file_gambar']['name'])): Cek apakah ada file yang dipilih oleh pengguna.
- $this->upload->do_upload('file_gambar'): Proses upload file. Parameter 'file_gambar' adalah nama atribut name dari input file di HTML.
- Jika upload berhasil, $this->upload->data() akan mengembalikan informasi tentang file yang diupload, termasuk file_name yang kemudian disimpan ke database.
- Jika ada kesalahan upload, $this->upload->display_errors() akan memberikan pesan kesalahan.
- Data teks dan nama file gambar (jika ada) kemudian dikirimkan ke model untuk disimpan ke database.
- Mengembalikan respons JSON (status TRUE/FALSE dan message).

Dengan setup ini, Anda memiliki implementasi dasar untuk insert data dan upload file menggunakan AJAX di CodeIgniter 3.

Dibaca: 341

Konsep Utama

Struktur Proyek

Persiapan Database

Langkah-langkah Implementasi

1. Konfigurasi CodeIgniter

2. Model (application/models/Upload_model.php)

3. Controller (application/controllers/Upload_data.php)

4. View (application/views/upload/form_upload.php)

5. File JavaScript (assets/js/upload_script.js)

Cara Menjalankan

Penjelasan Kode

Jangan Lewatkan

Komentar

Recent Post

2. Model (`application/models/Upload_model.php`)

3. Controller (`application/controllers/Upload_data.php`)

4. View (`application/views/upload/form_upload.php`)

5. File JavaScript (`assets/js/upload_script.js`)