PHPackages                             uiforge/uiunit - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Testing & Quality](/categories/testing)
4. /
5. uiforge/uiunit

ActiveLibrary[Testing & Quality](/categories/testing)

uiforge/uiunit
==============

Unit-unit UI yang reusable

1.3.2(11mo ago)012MITPHP

Since Jul 9Pushed 11mo agoCompare

[ Source](https://github.com/abdullukmana/uiunit)[ Packagist](https://packagist.org/packages/uiforge/uiunit)[ RSS](/packages/uiforge-uiunit/feed)WikiDiscussions master Synced today

READMEChangelogDependencies (1)Versions (4)Used By (0)

Forge\\Uiunit Library for CodeIgniter 4
=======================================

[](#forgeuiunit-library-for-codeigniter-4)

`Forge\Uiunit` adalah library modular untuk CodeIgniter 4 yang menyediakan antarmuka pengguna (UI) berbasis Bootstrap 5, dengan dukungan **sidebar dinamis**, **accordion list**, dan **layout yang dapat diperluas**. Cocok digunakan untuk membangun aplikasi dokumentasi, platform pembelajaran, dashboard admin, maupun sistem navigasi bertingkat.

---

✨ Fitur Utama
-------------

[](#-fitur-utama)

- ✅ Layout responsif berbasis **Bootstrap 5**
- ✅ Sidebar kiri dan kanan (opsional dan fleksibel)
- ✅ Sistem layout berbasis `extend()` dan `section()` khas CodeIgniter 4
- ✅ Komponen `ListGroupCell` untuk menampilkan menu nested (accordion)
- ✅ Dukungan warna berbeda untuk setiap level menu
- ✅ Sistem manajemen state accordion melalui `AccordionState`
- ✅ Perintah Artisan (`ui:init`) untuk inisialisasi file asset
- ✅ Konfigurasi routing bawaan

---

📦 Instalasi
-----------

[](#-instalasi)

Instal library ini melalui Composer:

```
composer require uiforge/uiunit
```

> Anda juga bisa menjalankan perintah berikut untuk menginisialisasi file asset (jika tersedia):

```
php spark uiunit:init
```

🔗 Integrasi Routing Tambahan
----------------------------

[](#-integrasi-routing-tambahan)

Untuk mendukung penyimpanan state accordion (buka/tutup), Anda perlu menambahkan routing berikut di app/Config/Routes.php:

```
// Tambahkan di atas definisi route accordion
$routes->addPlaceholder('accordionTitle', '[a-zA-Z0-9\-_ ]+');

// Route GET untuk mendapatkan semua state dari cookie
$routes->get(
    'accordion-state',
    'AccordionState::get',
    ['namespace' => 'Forge\Uiunit\Controllers']
);

// Route POST untuk menyimpan perubahan state berdasarkan title
$routes->post(
    'accordion-state/save/(:accordionTitle)',
    'AccordionState::save/$1',
    ['namespace' => 'Forge\Uiunit\Controllers']
);
```

---

🗂️ Struktur Library
-------------------

[](#️-struktur-library)

```
vendor/uiforge/uiunit/src/
├── Cells/
│   ├── ListGroupCell.php      ← Komponen Cell (logika)
│   └── list_group.php         ← View Cell (tampilan HTML)
├── Commands/
│   └── UiInit.php             ← Perintah spark `uiunit:init`
├── Config/
│   └── Routes.php             ← Routing tambahan (opsional)
├── Controllers/
│   └── AccordionState.php     ← Menyimpan dan menerapkan state accordion
├── Views/
│   └── layout.php             ← Layout HTML utama
└── README.md

```

---

📐 Section yang Didukung Layout
------------------------------

[](#-section-yang-didukung-layout)

Layout `Views/layout.php` mendukung berbagai `section` modular berikut:

SectionFungsi`title`Judul halaman ```description`Meta deskripsi untuk SEO`keywords`Meta keywords untuk SEO`head`Tambahan konten dalam `` (CSS, meta tambahan, dll.)`scripts`Tambahan JavaScript di akhir halaman`brand`Komponen brand/logo (navbar dan sidebar)`navbar`Konten navigasi utama (dalam navbar)`firstSidebar`Sidebar kiri (dengan dukungan offcanvas & responsive toggle)`lastSidebar`Sidebar kanan (opsional, dengan toggle offcanvas)`content`Konten utama halaman (dalam ``)`footer`Footer halamanSidebar dapat diatur dengan parameter:

```
$sidebar = [
    'first' => true,   // Aktifkan sidebar kiri
    'last'  => false   // Nonaktifkan sidebar kanan
];
```

---

🚀 Contoh Penggunaan
-------------------

[](#-contoh-penggunaan)

### 1. Controller

[](#1-controller)

```
use Forge\Uiunit\Controllers\AccordionState;

class Home extends BaseController
{
    protected AccordionState $accordionState;

    public function __construct()
    {
        $this->accordionState = new AccordionState();
    }

    public function index(): string
    {
        $items = [ /* Struktur nested array menu */ ];

        $this->accordionState->apply($items);

        return view('welcome_message', [
            'items'           => $items,
            'colors'          => ['#F5B8BB', '#BDD4FC', '#95D6AD', '#DBA3EA'],
            'accordionState'  => $this->accordionState->get(),
            'sidebar'         => ['first' => true, 'last' => false]
        ]);
    }
}
```

---

### 2. View (`welcome_message.php`)

[](#2-view-welcome_messagephp)

```