Codeigniter 3 – CRUD Bagian 1 Tambah Data

بِسْمِ اللَّهِ Mudah-mudahan tutorial Codeigniter 3 – CRUD Bagian 1 Tambah Data ini bermanfaat

CRUD (Create, Read, Update, dan Delete) bagian pertama adalah Create atau disini saya menyebutnya tambah data. Hal ini sangat penting karena disini adalah awal data masuk, dimana ini memerlukan validasi untuk memastikan data sudah dimasukkan dengan benar. Juga dilengkapi dengan upload gambar.

Persiapan Codeigniter 3 – CRUD Bagian 1 Tambah Data

Untuk melanjutkan tutorial pastikan sudah ada ini:

Editor yang digunakan adalah Visual Studio Code
Mengerjakan tutorial sebelumnya yaitu Codeigniter 3 – CRUD List Data dengan Pagination
Untuk dokumentasi upload file di Codeigniter 3 bisa dibaca disini

Pertama

Karena pada tutorial ini berhubungan dengan form, maka buka application\config\autoload.php untuk memastikan ‘form_validation’ sudah ada pada $autoload[‘libraries’], juga ‘form’ sudah ada di $autoload[‘helper’].

Atau bisa juga dipanggil pada setiap controller. Dengan cara menambahkan script berikut

$this->load->helper('form');
$this->load->library('form_validation');

Kedua

Buka model application\models\Product_model.php kemudian tambahkan script berikut

    public function count_all()
    {
        $query = $this->make_query();
        $data = $this->db->query($query);

        return $data->num_rows();
    }

    function insert() {
        $post = $this->input->post();
        $image = $this->uploadImage();
        $data = array(
            'product_name' => $post["product_name"],
            'description' => $post["description"],
            'url' => $image,
            'create_date' => date("Y-m-d H:i:s"),
            'create_by' => $this->ion_auth->user()->row()->username,
            'active' => '1',
        );
        $this->db->insert('products', $data);
    }

    private function uploadImage()
    {
       
        $config['upload_path']          = './assets/upload/image/';
        $config['allowed_types']        = 'gif|jpg|jpeg|png';
        $config['overwrite']            = true;
        $config['max_size']             = 10240;

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

        if ($this->upload->do_upload('image_file')) {
            return $this->upload->data("file_name");
        }
        
        return "default.png";
    }

Disini saya sertakan juga fungsi count_all, disana ada sedikit kesalahan yang menyebabkan ada sedikit masalah dengan pagination pada tutorial sebelumnya Codeigniter 3 – CRUD List Data dengan Pagination

Fungsi yang pertama adalah insert() untuk tambah data produk.

Fungsi yang kedua adalah uploadImage() untuk mengupload gambar, fungsi ini menghasilkan nama file yang berhasil diupload. Jika ada error pada waktu upload bisa dilihat menggunakan script ini : $this->upload->display_errors()

Ketiga

Update controller Product (application\controllers\Product.php) dengan menambahkan script berikut

    public function add()
    {
        if ($this->ion_auth->logged_in()) {
            $data['title'] = "Tambah Produk";
            $data['page_name'] = "product/add";
            $this->load->view('template', $data);
        } else {
			redirect('auth/login');
        }
    }

    public function save()
    {
        if ($this->ion_auth->logged_in()) {
            $this->form_validation->set_rules('product_name', 'Nama Produk', 'trim|required',
                                                array(
                                                        'required'      => '%s harus diisi.'
                                                )
                                            );
	        $this->form_validation->set_rules('description', 'Diskripsi', 'trim|required',
                                                array(
                                                        'required'      => '%s harus diisi.'
                                                )
                                            );

	        if ($this->form_validation->run() == FALSE) {
                $data['title'] = "Tambah Produk";
                $data['page_name'] = "product/add";
                $this->load->view('template', $data);	                            
	        } else {
	           
                $this->product_model->insert();
                redirect('product');
            
	        }            
        } else {
			redirect('auth/login');
        }
    }

Pada controller ditambahkan 2 fungsi:

  1. add

Fungsi ini untuk membuka form tambah. Dimana sebelumnya ada pengecekan user atau autentikasi user. Sementara disini hanya user yang terdaftar saja yang bisa melakukan penambahan data produk. Nantinya mungkin bisa dikembangkan lagi, dengan menambah otorisasi user yang terdaftar dan mempunyai grup admin

  1. save

Fungsi ini untuk menyimpan data produk. Sama dengan fungsi add, disini juga ada pengecekan user atau autentikasi user. Selain pengecekan user juga ada validasi untuk memastikan data sudah dimasukkan dengan benar.

Keempat

Buat view untuk menampilkan form add, sebut saja namanya add.php yang lokasinya di application\views\product\add.php. Scriptnya sebagai berikut

                    <div class="card shadow mb-4">
                        
                        <div class="card-body">
                            <?php
                                if(validation_errors()){
                            ?>
                            <div class="alert alert-warning" role="alert">
                                <?php echo validation_errors(); ?>
                            </div>
                            <?php 
                                }
                            ?>
                            <form class="user" action="<?= base_url(); ?>product/save" method="post" enctype="multipart/form-data">
                                <div class="form-group">
                                    <input type="text" class="form-control form-control-user" id="product_name" name="product_name" placeholder="Nama Produk" value="<?= set_value('product_name') ?>">
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control form-control-user" id="description" name="description" placeholder="Diskripsi" value="<?= set_value('description') ?>">
                                </div>
                                <div class="form-group">
                                    <input type="file" id="image_file" name="image_file" class="form-control form-control-user" accept=".jpg,.png,.jpeg,.gif" />
                                </div>
                                <button type="submit" class="btn btn-primary btn-user btn-block">Simpan</button>
                            </form>
                        </div>
                    </div>                        

Setelah ada penambahan data produk dimana juga ada upload gambar. Maka perlu ada perubahan juga pada view list (application\views\product\list.php) untuk menampilkan gambar yang sudah diupload pada kolom Gambar. Berikut ini scriptnya

                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary"><?= $title; ?></h6>
                            <div class="row">
                                <div class="col">
                                    <div class="text-center"><?= $links; ?></div> 
                                </div> 
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>Nama Produk</th>
                                            <th>Deskripsi</th>
                                            <th>Gambar</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php
                                            foreach ($products as $row) {
                                        ?>
                                            <tr>
                                                <td><?= $row->id; ?></td>
                                                <td><?= $row->product_name; ?></td>
                                                <td><?= $row->description; ?></td>
                                                <td>
                                                    <img height="60px" src="<?= base_url().'/assets/upload/image/'.$row->url; ?>" />
                                                </td>
                                            </tr>
                                        <?php
                                        }
                                        ?>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>                        

Akhirnya

Silakan coba buka pada browser

Tampilan form tambah data

Tampilan validasi error

Tampilan list data setelah update

Mungkin ada yang membutuhkan gambar untuk default

Sampai disini sudah selesai untuk tutorial Codeigniter 3 – CRUD Bagian 1 Tambah Data. Silakan dilanjutkan dan dikembangkan.

Mudah-mudahan bermanfaat.

Share

You may also like...

1 Response

  1. I as well as my friends appeared to be analyzing the great key points on your web page and so all of a sudden I got an awful feeling I had not expressed respect to the web site owner for those techniques. My ladies are actually so happy to see all of them and have in reality been taking advantage of them. We appreciate you really being well helpful and for opting for variety of good things millions of individuals are really needing to be aware of. Our own honest apologies for not expressing gratitude to earlier.

Leave a Reply

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