Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Membuat Aplikasi Sistem Informasi Penjualan dengan Codeigniter 4 Part #3 – Modul Category

9 min read

Sistem Informasi Penjualan dengan Codeigniter 4 Part 3

Ini merupakan part ke 3 dari tutorial cara membuat aplikasi Sistem Informasi Penjualan dengan Codeigniter 4.

Pada part ini Anda akan belajar manajement CRUD Category, session flashdata, sampai validation.

Sebelumnya Ilmu Coding sudah membahas templating di part ke 2. Jika Anda belum membacanya, alangkah baiknya untuk membaca part ke 2 terlebih dahulu.

Jika sudah, di halaman ini Anda akan belajar:

  1. Membuat CRUD manajement Category
  2. Session flashdata
  3. Custom validation

Sebelum memulainya jangan lupa segelas kopi untuk menemanimu ngoding.

Let’s go!

Sekilas Tentang Session

Pada part ini saya hanya menggunakan session flashdata.

Di Codeigniter 3, biasanya mesti set library session di autoload atau controller.

Namun di Codeigniter 4 ternyata kita tidak perlu melakukan itu lagi.

Sudah otomatis.

Pada halaman controller kita bisa set session flashdata dengan script di bawah ini:

session()->setFlashdata(‘key’,’value’);

Sedangkan di halaman view biasanya menggunakan get flashdata seperti script di bawah ini:

session()->getFlashdata(‘key’);

Sebenarnya tidak hanya flashdata, Anda bisa menggunakan userdata dan lain-lain.

Anda bisa membaca dokumentasi library session di sini.

Sekilas Tentang Validation

Meskipun di dokumentasi Codeigniter 4 pembahasan validation sangat lengkap, tentu saya memerlukan kustomisasi.

Sebagai contoh dokumentasi menyarankan untuk membuat view _errors_list.php di folder Views khusus untuk melampilkan alert dan mendaftarkan templatenya ke Config/Validation.php.

Namun saya tidak menggunakannya. Saya mengambil salah satu trik yang diajarkan di dokumentasi, yaitu mendaftarkan validation grup category ke Config/Validation.php.

Jadi pada saat pemanggilan di controller lebih simple dan bisa digunakan berulang-ulang.

Anda bisa membaca dokumentasinya di sini.

Saya pun menggunakan session untuk membuat set dan get pada hasil validationnya.

Ini optional aja. Tergantung programmernya.

Saya pikir, ini lebih mudah saya lakukan.

Manajement Category

Ini saatnya untuk membuat CRUD Category.

Di part ke 1, kita sudah membuat tablenya.

Di part ke 2, kita sudah membuat sidebar yang mengarah ke controller Category.

Sekarang kita akan memulai menyusun CRUD manajemen Category.

Silahkan ikuti langkah berikut:

Step #1 – Buat Model Category

Silahkan buat file bernama Category_model.php dan simpan di app/Models.

Kemudian ketik kode berikut:

<?php namespace App\Models;
use CodeIgniter\Model;
 
class Category_model extends Model
{
    protected $table = 'categories';
     
    public function getCategory($id = false)
    {
        if($id === false){
            return $this->findAll();
        } else {
            return $this->getWhere(['category_id' => $id]);
        }   
    }
}
?>

Penjelasan:

Pada baris ke 8 di function getCategory() saya menambahkan variable $id yang secara default bernilai false.

Jadi jika saya memberikan parameter atau tidak, maka function akan berjalan normal meski tanpa pemanggilan getCategory($id).

Di baris ini pula kita bisa memilih mau menambahkan parameter atau tidak.

Pada baris ke 10 – 14 kita membuat pilihan apabila $id terisi, maka akan menjalankan function getWhere(), jika tidak akan menggunakan findAll().

getWhere() digunakan apabila kita ingin menampilkan suatu table namun dengan tambahan WHERE. Sedangkan findAll() digunakan untuk menampilkan semua data tanpa parameter WHERE.

Step #2 – Buat Controller Category

Silahkan buat file baru bernama Category.php kemudian simpan di directory app\Controllers.

Kemudian ketik kode berikut:

<?php namespace App\Controllers;
 
use CodeIgniter\Controller;
use App\Models\Category_model;
 
class Category extends Controller
{

    public function index()
    {
        $model = new Category_model();
        $data['categories'] = $model->getCategory();
        echo view('category/index', $data);
    }
}
?>

Penjelasan:

Pada baris ke 4 saya memanggil Category_model dengan script:

use App\Models\Category_model;

Anda juga bisa memanggil model lainnya di bawah baris ke 4 ini.

Pada baris ke 11 saya membuat variable $model yang isinya merupakan pemanggilan class Category_model.

Pada baris ke 12 saya memanggil function getCategory() yang letaknya ada di dalam file Category_model.

Dan baris ke 13 menampilkan view beserta data yang akan dibawa.

Step #3 – Buat View Index

Silahkan buat folder baru bernama category di dalam direktori app/Views.

Di dalam folder category silahkan buat file bernama index.php.

Kemudian ketik kode berikut:

<?php echo view('_partials/header'); ?>
<?php echo view('_partials/sidebar'); ?>

<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">Categories</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">Categories</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            List Category
                            <a href="<?php echo base_url('category/create'); ?>" class="btn btn-primary float-right">Tambah</a>
                        </div>
                        <div class="card-body">
                        
                            <?php
                            if(!empty(session()->getFlashdata('success'))){ ?>
                            <div class="alert alert-success">
                                <?php echo session()->getFlashdata('success');?>
                            </div>     
                            <?php } ?>

                            <?php if(!empty(session()->getFlashdata('info'))){ ?>
                            <div class="alert alert-info">
                                <?php echo session()->getFlashdata('info');?>
                            </div>
                            <?php } ?>

                            <?php if(!empty(session()->getFlashdata('warning'))){ ?>
                            <div class="alert alert-warning">
                                <?php echo session()->getFlashdata('warning');?>
                            </div>
                            <?php } ?>

                            <div class="table-responsive">
                                <table class="table table-bordered table-hovered">
                                    <thead>
                                        <tr>
                                            <th>No</th>
                                            <th>Name</th>
                                            <th>Status</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php foreach($categories as $key => $row){ ?>
                                        <tr>
                                            <td><?php echo $key + 1; ?></td>
                                            <td><?php echo $row['category_name']; ?></td>
                                            <td><?php echo $row['category_status']; ?></td>
                                            <td>
                                                <div class="btn-group">
                                                    <a href="<?php echo base_url('category/edit/'.$row['category_id']); ?>" class="btn btn-sm btn-success">
                                                        <i class="fa fa-edit"></i>
                                                    </a>
                                                    <a href="<?php echo base_url('category/delete/'.$row['category_id']); ?>" class="btn btn-sm btn-danger" onclick="return confirm('Apakah Anda yakin ingin menghapus kategori ini?');">
                                                        <i class="fa fa-trash-alt"></i>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                        <?php } ?>
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<?php echo view('_partials/footer'); ?>

Penjelasan:

Pada baris ke 1 – 2 dan 90 merupakan pemanggilan partials yang sebelumnya sudah kita buat pada part ke 2.

Baris ke 32 – 49 merupakan pemanggilan session flashdata untuk menampilkan pesan success create, success update dan success delete.

Step #4 – Testing Index

Silahkan masuk ke dalam direktori project dan ketik command di bawah ini:

php spark serve

Kemudian ketik url berikut ini:

http://localhost:8080/category

Jika berhasil akan tampil halaman ini:

Sistem Informasi Penjualan dengan Codeigniter 4 Part 3 - Gambar 1

Step #5 – Membuat Function Insert di Model Category

Silahkan tambahkan function insert data di dalam file Category_model.

Ketik kode berikut:

public function insertCategory($data)
{
    return $this->db->table($this->table)->insert($data);
}

Step #6 – Membuat Function Create dan Store di Controller Category

Tambahkan function create dan store di dalam file controller Category.php .

Ketik kode berikut:

public function create()
{
    return view('category/create');
}

public function store()
{
    $validation =  \Config\Services::validation();

    $data = array(
        'category_name'     => $this->request->getPost('category_name'),
        'category_status'   => $this->request->getPost('category_status'),
    );

    if($validation->run($data, 'category') == FALSE){
        session()->setFlashdata('inputs', $this->request->getPost());
        session()->setFlashdata('errors', $validation->getErrors());
        return redirect()->to(base_url('category/create'));
    } else {
        $model = new Category_model();
        $simpan = $model->insertCategory($data);
        if($simpan)
        {
            session()->setFlashdata('success', 'Created Category successfully');
            return redirect()->to(base_url('category')); 
        }
    }
}

Penjelasan:

Pada function store() saya menggunakan validation grup yang detailnya ada pada step #8.

Selain itu saya juga menggunakan session setFlashdata untuk menampung pesan error dan menampung data yang sebelumnya sudah diketik.

Biasanya ketika terjadi validasi, data yang sudah diketik tidak kembali / refresh. Namun di function ini saya mengembalikan data yang sudah diketik melalui session setFlashdata(‘inputs’, ‘value’).

Kemudian lakukan insert jika sudah berhasil melewati validasi.

Terakhir, saya juga menggunakan session untuk memberikan pesan jika berhasil melakukan insert data.

Step #7 – Membuat View Create Category

Silahkan buat file bernama create.php dan simpan di direktori app/Views/category.

Kemudian ketik kode berikut:

<?php echo view('_partials/header'); ?>
<?php echo view('_partials/sidebar'); ?>

<div class="content-wrapper">
  <div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1 class="m-0 text-dark">Create Category</h1>
        </div>
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item active">Create Category</li>
          </ol>
        </div>
      </div>
    </div>
  </div>

  <div class="content">
    <div class="container-fluid">
      <div class="row">
          <div class="col-md-12">
            <form action="<?php echo base_url('category/store'); ?>" method="post">
              <div class="card">
                <div class="card-body">
                  <?php 
                  $inputs = session()->getFlashdata('inputs');
                  $errors = session()->getFlashdata('errors');
                  if(!empty($errors)){ ?>
                  <div class="alert alert-danger" role="alert">
                    Whoops! Ada kesalahan saat input data, yaitu:
                    <ul>
                    <?php foreach ($errors as $error) : ?>
                        <li><?= esc($error) ?></li>
                    <?php endforeach ?>
                    </ul>
                  </div>
                  <?php } ?>

                  <div class="form-group">
                      <label for="">Name</label>
                      <input type="text" class="form-control" name="category_name" placeholder="Enter category name" value="<?php echo $inputs['category_name']; ?>">
                  </div>
                  <div class="form-group">
                      <label for="">Status</label>
                      <select name="category_status" id="" class="form-control">
                          <option value="">Pilih Kategori</option>
                          <option <?php echo $inputs['category_status'] == "Active" ? "selected" : ""; ?> value="Active">Active</option>
                          <option <?php echo $inputs['category_status'] == "Inactive" ? "selected" : ""; ?> value="Inactive">Inactive</option>
                      </select>
                  </div>
                </div>
                <div class="card-footer">
                    <a href="<?php echo base_url('category'); ?>" class="btn btn-outline-info">Back</a>
                    <button type="submit" class="btn btn-primary float-right">Simpan</button>
                </div>
              </div>
            </form>
          </div>
      </div>
    </div>
  </div>
</div>
<?php echo view('_partials/footer'); ?>

Penjelasan:

Yang paling penting adalah pembahasan variable $inputs.

Variabel ini menampung data yang sudah diketik sebelumnya jika terjadi validasi. Jadi sepanjang apapun Anda mengetik dan kemudian terkena validasi, Anda tidak akan capek-capek mengetik ulang. Sebab, apa yang sudah Anda ketik sebelumnya akan dikembalikan.

Step #8 – Konfigurasi Validation

Di step 6 pada pembahasan validasi, saya menyinggung permasalahan group.

Nah, untuk mengkonfigurasinya silahkan buka file app/Config/Validation.php

Tambahkan kode berikut ini:

<?php namespace Config;

class Validation
{
	public $ruleSets = [
		\CodeIgniter\Validation\Rules::class,
		\CodeIgniter\Validation\FormatRules::class,
		\CodeIgniter\Validation\FileRules::class,
		\CodeIgniter\Validation\CreditCardRules::class,
	];

	public $templates = [
		'list'   => 'CodeIgniter\Validation\Views\list',
		'single' => 'CodeIgniter\Validation\Views\single',
	];

	public $category = [
        'category_name'     => 'required',
        'category_status'     => 'required'
	];
	
	public $category_errors = [
        'category_name' => [
            'required'    => 'Nama category wajib diisi.',
        ],
        'category_status'    => [
            'required' => 'Status category wajib diisi.'
        ]
    ];
}

Penjelasan:

Kode di atas berisi rule, label dan pesan error yang akan ditampilkan.

Di file tersebut silahkan tambahkan kode seperti pada baris 17 sd 29.

Pada baris 17 – 29, Pastikan nama variable $category sesuai dengan pemanggilan yang ada di function store $validation->run($data, ‘category’).

Sedangkan variable $category_errors perlu Anda setting seperti ini (dengan menambahkan _errors) untuk bagian message errornya.

Kemudian simpan.

Step #9 – Testing Create dan Store

Jika berjalan lancar, berikut hasilnya:

Tampilan gambar saat terjadi validasi
Tampilan saat berhasil melakukan insert data

Step #10 – Membuat Function Update di Model Category

Silahkan tambahkan function di bawah ini tepat di bawah function insertData($data) pada file Category_model.php

Kodenya:

public function updateCategory($data, $id)
{
    return $this->db->table($this->table)->update($data, ['category_id' => $id]);
}

Simpan.

Step #11 – Membuat Function Edit dan Update di Controller Category

Silahkan tambahkan function di bawah ini tepat di bawah function store() pada file Category.php.

Kodenya:

public function edit($id)
{  
    $model = new Category_model();
    $data['category'] = $model->getCategory($id)->getRowArray();
    echo view('category/edit', $data);
}

public function update()
{
    $id = $this->request->getPost('category_id');

    $validation =  \Config\Services::validation();

    $data = array(
        'category_name'     => $this->request->getPost('category_name'),
        'category_status'   => $this->request->getPost('category_status'),
    );
    
    if($validation->run($data, 'category') == FALSE){
        session()->setFlashdata('inputs', $this->request->getPost());
        session()->setFlashdata('errors', $validation->getErrors());
        return redirect()->to(base_url('category/edit/'.$id));
    } else {
        $model = new Category_model();
        $ubah = $model->updateCategory($data, $id);
        if($ubah)
        {
            session()->setFlashdata('info', 'Updated Category successfully');
            return redirect()->to(base_url('category')); 
        }
    }
}

Simpan.

Step #12 – Membuat View Edit Category

Buat file baru bernama edit.php di direktori app/Views/category.

Silahkan tambahkan kode di bawah ini:

<?php echo view('_partials/header'); ?>
<?php echo view('_partials/sidebar'); ?>

<div class="content-wrapper">
  <div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1 class="m-0 text-dark">Edit Category</h1>
        </div>
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item active">Edit Category</li>
          </ol>
        </div>
      </div>
    </div>
  </div>

  <div class="content">
    <div class="container-fluid">
      <div class="row">
          <div class="col-md-12">
            <form action="<?php echo base_url('category/update'); ?>" method="post">
              <div class="card">
                <div class="card-body">
                  <?php 
                  $errors = session()->getFlashdata('errors');
                  if(!empty($errors)){ ?>
                  <div class="alert alert-danger" role="alert">
                    Whoops! Ada kesalahan saat input data, yaitu:
                    <ul>
                    <?php foreach ($errors as $error) : ?>
                        <li><?= esc($error) ?></li>
                    <?php endforeach ?>
                    </ul>
                  </div>
                  <?php } ?>

                  <input type="hidden" name="category_id" value="<?php echo $category['category_id']; ?>">
                  <div class="form-group">
                      <label for="">Name</label>
                      <input type="text" value="<?php echo $category['category_name']; ?>" class="form-control" name="category_name" placeholder="Enter category name">
                  </div>
                  <div class="form-group">
                      <label for="">Status</label>
                      <select name="category_status" id="" class="form-control">
                          <option value="">Pilih Kategori</option>
                          <option value="Active" <?php echo $category['category_status'] == "Active" ? 'selected' : '' ?>>Active</option>
                          <option value="Inactive" <?php echo $category['category_status'] == "Inactive" ? 'selected' : '' ?>>Inactive</option>
                      </select>
                  </div>

                </div>
                <div class="card-footer">
                    <a href="<?php echo base_url('category'); ?>" class="btn btn-outline-info">Back</a>
                    <button type="submit" class="btn btn-primary float-right">Update</button>
                </div>
              </div>
            </form>
          </div>
      </div>
    </div>
  </div>

</div>
<?php echo view('_partials/footer'); ?>

Simpan.

Step #13 – Testing Edit dan Update

Jika berjalan lancar berikut hasilnya:

Tampilan saat validasi error di halaman edit
Tampilan saat berhasil ubah

Step #14 – Membuat Function Delete di Model Category

Silahkan tambahkan function di bawah ini tepat di bawah function updateCategory($data, $id) pada file Category_model.php.

Kodenya:

public function deleteCategory($id)
{
    return $this->db->table($this->table)->delete(['category_id' => $id]);
}

Simpan.

Step #11 – Membuat Function Delete di Controller Category

Silahkan tambahkan function di bawah ini tepat di bawah function update() pada file Category.php.

Kodenya:

public function delete($id)
{
    $model = new Category_model();
    $hapus = $model->deleteCategory($id);
    if($hapus)
    {
        session()->setFlashdata('warning', 'Deleted Category successfully');
        return redirect()->to(base_url('category')); 
    }
}

Simpan.

Step #12 – Testing Delete Category

Jika berjalan dengan lancar, berikut hasilnya:

Tampilan saat berhasil delete

Screenshoot Project Sturucture

Full Source Code

Silahkan download source full code sistem informasi penjualan dengan codeigniter 4 part ke 3 ini melalui link di bawah ini:

Download Source Code

Pengantar Sistem Informasi Penjualan dengan Codeigniter 4

Demikianlah tutorial membuat sistem informasi penjualan dengan codeigniter 4 part ke 3 ini.

Di part ini membahas:

  1. Sekilas tentang session
  2. Sekilas tentang validation
  3. Manajement category

Pada part berikutnya Anda akan belajar manajement CRUD data product.

Semoga Anda terus mengikuti tutorial di Ilmu Coding.

Aamiin.

Terima kasih telah membaca artikel ini. Jangan lupa share dan komentar ya.

Tunggu part berikutnya.

Selamat belajar …

Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

8 Replies to “Membuat Aplikasi Sistem Informasi Penjualan dengan Codeigniter 4 Part…”

  1. Selamat malam Ilmu koding, perkenalkan, saya Andre dari medan, terimakasih tutorialnya, sangat membantu sekali untuk saya yang sedang mengerjakan skripsi menggunakan framework codeigniter, materinya jelas dan sangat mudah dipahami, tidak sabar menunggu artikel selanjutnya 🙂

  2. Selamat Pagi Ilmu Koding, salam kenal Bang, oh iya terimakasih sudah mau memberi ilmu nya. sangat membantu sekali. oh iya saya ingin bertanya ketika validasi input yang tidak error kenapa harus disimpan di array lagi min ? apakah tidak bisa langsung disimpan di setFlashdata dan divalue nya di panggil getFlashdata ?
    mohon dijawab min, maaf kalau saya bawel, saya hanya penasaran, karena masih baru di CI4.
    terimakasih sekali lagi min, ilmunya berguna sekali. saya jadi tahu cara penggunaan framework seperti apa. semangat min, dan ditunggu uploadan lainnya, hehe

    1. Terima kasih atas pertanyaannya, Mas Bara.

      Terkait pertanyaannya mohon disebutkan juga pada file apa, jika ada di dalam function (contohnya store) disebutkan juga.

      Sebab, saya hanya bisa menerka-menerka pada file mana pertannyannya.

      1. baris ke 16 pada function Store (Category Controller) min untuk setFlashdata dan baris ke 44 componen input pada value nya di halaman create.php Category min untuk getFlashdata.

  3. bang bantu jawab ya, $categories = $this->category_model->where(‘category_status’, ‘Inactive’)->findAll();

    kalau mau select option tanpa harus memilih yang active dan inactive bagaimana ya?

    1. Solusinya, di database table category tidak menggunakan enum. Gunakan saja varchar. Sehingga mas bebas memodifikasi categorynya diisi status yang lain.

  4. ErrorException
    Trying to access array offset on value of type null
    APPPATH\Views\category\create.php at line 44

    37
    38
    39
    40
    41
    42
    43 Name
    44 <input type="text" class="form-control" name="category_name" placeholder="Enter category name" value="”>
    45

    permisi mas saya ingin bertnya saya mengalami erorr seperti d atas , pada hal saya sudah mengikutin codingannya , mohon pencerahannya mas , trimakasih

Leave a Reply

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

Jika terbantu dengan artikel ini, silahkan share, beri komentar dan "klik" 1 kali pada iklan ya.