Tatter\Frontend

Opinionated suite of frontend tech for CodeIgniter 4

Description

This library leverages Tatter\Assets alongside the framework's Publisher Library to automate asset discovery and HTML tag injection for an opinionated selection of frontend solutions.

Installation

Install easily via Composer to take advantage of CodeIgniter 4's autoloading capabilities and always be up-to-date:

composer require tatter/frontend

Or, install manually by downloading the source files and adding the directory to app/Config/Autoload.php.

Once the files are downloaded and included in the autoload run the framework's publish command to inject all assets into your front controller path:

php spark publish

Included Solutions

Asset Libraries

• AdminLTE - Admin dashboard template
• Bootstrap - Mobile-first front-end CSS framework directed at responsive web development
• DataTables - To enhance the accessibility of data in HTML tables
• FontAwesome - Popular icon set and toolkit for vector icons and social logos
• jQuery - A fast, small, and feature-rich JavaScript library

Support Libraries

• League\CommonMark
• Tatter\Alerts
• Tatter\Assets
• Tatter\Layouts
• Tatter\Menus
• Tatter\Themes

*Note: jQuery is included because some other libraries depend on it; should those libraries remove it as a dependency or be removed themselve then jQuery will no longer be included.

Versioning

The intent is to maintain two major versions of this library for an indefinite amount of time until AdminLTE 4 is fully released and stable for production use. The core differences will be around the dependency stack for AdminLTE, Bootstrap, and jQuery.

Library version	Bootstrap version	AdminLTE version	jQuery
1.x	4.x	3.x	Yes
2.x	5.x	4.x	No

Configuration

For full configuration details see the Assets docs.

Enable the AssetsFilters on any "after" routes where you want tags applied. To apply them everywhere simply add to $globals. app/Config/Filters.php:

    /**
     * List of filter aliases that are always
     * applied before and after every request.
     *
     * @var array
     */
    public $globals = [
        'before' => [
            // 'honeypot',
            // 'csrf',
        ],
        'after'  => [
            'assets',
        ],
    ];

Then create or edit your Assets config file and add each bundle for the routes where you want them to be applied. app/Config/Assets.php:

<?php

namespace Config;

use Tatter\Frontend\Bundles\AdminLTEBundle;
use Tatter\Frontend\Bundles\BootstrapBundle;
use Tatter\Frontend\Bundles\FontAwesomeBundle;

class Assets extends \Tatter\Assets\Config\Assets
{
    public $routes = [
        '*' => [
            BootstrapBundle::class,
            FontAwesomeBundle::class,
        ],
        'admin/*' => [
        	AdminLTEBundle::class,
        	ChartJSBundle::class,
        ],
        'files/upload' => [
        	DropzoneJSBundle::class,
        ]
    ];
}

Note that each Bundle includes its dependency (e.g. AdminLTE includes Bootstrap, Bootstrap includes jQuery), so while there is no harm in repeating assets it is also unnecessary. This does not extend to optional plugins, e.g. if you want to use FontAwesome in AdminLTE you will need to include both.

Testing

This library includes a PHPUnit extension classes in src/Test/ to assist with testing vendor-sourced Publishers. Tatter\Assets has a similar test case for Bundles. These two classes are used to test the files from this library but are also available for other projects that use Tatter\Frontend. To test your own classes simply extend the appropriate test case and add a data provider method with your class name and criteria to meet. See the test files in tests/ for examples.