Cara Membuat Aplikasi Inventaris Barang dengan CodeIgniter 3 (Part 1)

📦 Seri Tutorial CodeIgniter 3 — Aplikasi Inventaris Barang

  1. Part 1: Setup & Menampilkan Data (sedang dibaca)
  2. Part 2: CRUD (Tambah, Edit, Hapus)
  3. Part 3: Pencarian & Pagination
  4. Part 4: Login & Autentikasi

CodeIgniter 3 hingga kini masih banyak dipakai di dunia kerja dan proyek nyata karena ringan, stabil, dan mudah dipelajari. Pada seri tutorial ini kita akan membangun sebuah aplikasi inventaris barang (manajemen stok gudang) dari nol menggunakan CodeIgniter 3, lengkap dengan CRUD, pencarian, pagination, hingga sistem login.

Di Part 1 ini, fokus kita adalah menyiapkan proyek: instalasi, konfigurasi dasar, memahami pola MVC, membuat database, lalu menampilkan daftar barang ke halaman.

Alur Kerja CodeIgniter 3 (MVC)
Alur Kerja CodeIgniter 3 (MVC)

Mengenal CodeIgniter 3 dan Pola MVC

CodeIgniter memakai pola MVC (Model-View-Controller) yang memisahkan aplikasi menjadi tiga bagian:

  • Model — mengelola data dan komunikasi dengan database.
  • View — tampilan yang dilihat pengguna (HTML).
  • Controller — pengatur alur: menerima permintaan, memanggil model, lalu mengirim data ke view.

Pemisahan ini membuat kode rapi dan mudah dirawat. Diagram di atas memperlihatkan bagaimana permintaan mengalir dari browser sampai kembali menjadi halaman.

Menyiapkan Kebutuhan

  • XAMPP (atau server lokal lain) dengan PHP 7.x dan MySQL/MariaDB.
  • CodeIgniter 3 — unduh dari situs resmi.
  • Editor kode seperti VS Code.

Mengunduh dan Memasang CodeIgniter 3

Unduh CodeIgniter 3 dari situs resmi CodeIgniter, lalu ekstrak isinya ke dalam folder htdocs XAMPP. Ganti nama foldernya menjadi inventaris:

C:\xampp\htdocs\inventaris\

Struktur folder utama CodeIgniter 3 yang perlu Anda kenali:

FolderFungsi
application/Tempat kode aplikasi: controllers, models, views, config.
system/Inti framework (jangan diubah).
index.phpTitik masuk aplikasi.

Uji instalasi dengan membuka http://localhost/inventaris/. Bila muncul halaman “Welcome to CodeIgniter”, instalasi berhasil.

Konfigurasi Dasar

Ada tiga file konfigurasi penting di folder application/config/ yang harus disesuaikan.

1. config.php — atur base URL:

$config['base_url'] = 'http://localhost/inventaris/';

2. database.php — atur koneksi database:

$db['default'] = array(
    'dsn'      => '',
    'hostname' => 'localhost',
    'username' => 'root',
    'password' => '',
    'database' => 'inventaris',
    'dbdriver' => 'mysqli',
    // ... sisanya biarkan default ...
);

3. autoload.php — muat otomatis library database dan helper URL agar tidak perlu memanggilnya berulang:

$autoload['libraries'] = array('database');
$autoload['helper']    = array('url');

Membuat Database dan Tabel Barang

Buka phpMyAdmin, buat database bernama inventaris, lalu jalankan perintah SQL berikut untuk membuat tabel barang beserta beberapa data contoh:

CREATE TABLE barang (
    id INT PRIMARY KEY AUTO_INCREMENT,
    kode VARCHAR(20),
    nama VARCHAR(100),
    kategori VARCHAR(50),
    stok INT DEFAULT 0,
    harga INT DEFAULT 0
);

INSERT INTO barang (kode, nama, kategori, stok, harga) VALUES
('BRG001', 'Kertas A4',     'ATK', 150, 45000),
('BRG002', 'Pulpen Hitam',  'ATK', 500,  3000),
('BRG003', 'Tinta Printer', 'ATK',  40, 85000),
('BRG004', 'Map Folder',    'ATK', 200,  5000),
('BRG005', 'Stapler',       'ATK',  75, 25000);

Membuat Model Barang

Buat file application/models/Barang_model.php. Model inilah yang akan mengambil data dari tabel:

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

class Barang_model extends CI_Model
{
    public function getAll()
    {
        return $this->db->get('barang')->result_array();
    }
}

Metode $this->db->get('barang') adalah bagian dari Query Builder CodeIgniter yang menghasilkan query SELECT * FROM barang, lalu result_array() mengubah hasilnya menjadi array.

Membuat Controller Barang

Buat file application/controllers/Barang.php. Perhatikan penamaan huruf besar di awal — ini wajib di CodeIgniter:

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

class Barang extends CI_Controller
{
    public function __construct()
    {
        parent::__construct();
        $this->load->model('Barang_model');
    }

    public function index()
    {
        $data['barang'] = $this->Barang_model->getAll();

        $this->load->view('templates/header');
        $this->load->view('barang/index', $data);
        $this->load->view('templates/footer');
    }
}

Di dalam __construct() kita memuat model sekali agar bisa dipakai di semua metode. Metode index() mengambil data barang lalu meneruskannya ke view.

Membuat View dengan Partial Header dan Footer

Berbeda dengan CodeIgniter 4 yang punya sistem layout, di CI3 kita umumnya memecah tampilan menjadi potongan header dan footer yang bisa dipakai ulang. Buat application/views/templates/header.php:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Inventaris Barang</title>
    <link rel="stylesheet" href="<?= base_url('assets/gaya.css') ?>">
</head>
<body>
<header>
    <div class="logo">Inventaris Barang</div>
    <nav>
        <a href="<?= base_url('barang') ?>">Daftar Barang</a>
    </nav>
</header>
<main>

Lalu application/views/templates/footer.php:

</main>
<footer>
    © 2026 Aplikasi Inventaris
</footer>
</body>
</html>

Menampilkan Data Barang

Sekarang buat view utama application/views/barang/index.php yang menampilkan data dalam tabel:

<h2>Daftar Barang</h2>

<table border="1" cellpadding="8" cellspacing="0">
    <thead>
        <tr>
            <th>Kode</th><th>Nama Barang</th><th>Kategori</th>
            <th>Stok</th><th>Harga</th>
        </tr>
    </thead>
    <tbody>
    <?php foreach ($barang as $b): ?>
        <tr>
            <td><?= $b['kode'] ?></td>
            <td><?= $b['nama'] ?></td>
            <td><?= $b['kategori'] ?></td>
            <td><?= $b['stok'] ?></td>
            <td>Rp <?= number_format($b['harga'], 0, ',', '.') ?></td>
        </tr>
    <?php endforeach ?>
    </tbody>
</table>

Buka http://localhost/inventaris/barang di browser, dan daftar barang akan tampil rapi. Fungsi number_format() merapikan angka harga menjadi format rupiah.

Daftar barang di browser
Daftar barang di browser

Menghilangkan index.php dari URL (Opsional)

Secara bawaan, URL CodeIgniter 3 mengandung index.php (misalnya localhost/inventaris/index.php/barang). Agar lebih bersih, buat file .htaccess di folder root proyek:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]

Lalu ubah $config['index_page'] menjadi kosong di config.php. Kini URL menjadi lebih rapi tanpa index.php.

Penutup

Selamat! Fondasi aplikasi inventaris barang Anda sudah berdiri — instalasi, konfigurasi, database, serta menampilkan data lewat pola MVC yang benar. Anda kini memahami bagaimana Controller, Model, dan View bekerja sama di CodeIgniter 3.

Di Part 2, kita akan membuat aplikasi ini benar-benar hidup dengan menambahkan operasi CRUD: menambah barang baru, mengedit, dan menghapus, lengkap dengan validasi form. Sampai jumpa di bagian berikutnya!

Referensi: untuk pendalaman lebih lanjut, kunjungi dokumentasi resmi CodeIgniter 3.

Baca Juga

Ali Akbar

Software Developer yang fokus mengembangkan aplikasi berbasis Web dan Desktop. Senang mempelajari teknologi baru terutama di bidang web design dan web development.

View all posts by Ali Akbar →

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *