Download the PHP package hawkiq/admlte without Composer

Hawkiq AdmLTE Package

• This Package Heavely Inspired by Laravel-AdminLTE for AdminLTEv3, I used thier Components with few modifications to make it suitable for AdminLTEv4.

Hawkiq AdmLTE is a Laravel package designed for seamless integration of the AdminLTE v4 beta template, providing a robust foundation for admin dashboards. This package simplifies the installation, configuration, and usage of AdminLTE with Bootstrap 5 and related components.

Table of Contents

• Installation
  • Step 1: Require the Package
  • Step 2: Publish Assets, Lang, and Configurations
  • Step 3: Replace Auth Views (Optional)
• Configuration
  • Username Login
• Usage
  • Include the Layout
  • Customizing Views
• Using with Vite
  • Add new colors
• Language Selector
• Plugins
• Widgets
  • Card
  • Info Box
  • Small Box
  • Alert
• Contribution
• License

Installation

Follow these steps to install and set up the Hawkiq AdmLTE package:

Step 1: Require the Package

Add the package to your Laravel project via Composer:

Step 2: Publish Assets, Lang, and Configurations

Run the following Artisan command to publish the package's assets,language and configuration files:

This will:

• Copy AdminLTE assets (CSS, JS, images) to public/vendor.
• Publish the configuration file to config/admlte.php.
• Publish Languages files to lang/ or resources/lang/.

Step 3: Replace Auth Views ( Optional )

If you would like to use AdminLTE Auth views you can run below command to replace views:

this step is safe since its taking backup in storage folder for current views so if anything wrong happened you can always restoring old views.

Configuration

Customize the package by editing the configuration file located at:

Key configurations include:

• Sidebar links and permissions.
• Navbar components.
• Custom assets and scripts.

Example config/admlte.php:

Username Login

Sometimes you might prefer username to login this settings will make login via username and it will add username field to register page. Remember you should override method username() in LoginController.php or change Anything in RegisterControler related to username, this setting just to show Username or email in forms it has nothing to do with controllers.

set 'username_enabled' => true, then in app\Http\Controllers\AuthLoginController.php add

edit app\Http\Controllers\Auth\RegisterController.php

Usage

Include the Layout

To use the package's layout, extend the base layout in your Blade files:

If you want to include auth layout just use AdmLTE auth layouts:

for login page

for register page

Customizing Views

If you need to customize views,

• Publish customizable views to resources/views/vendor/admlte.

Using with Vite

if you prefer to Use asset bundling using vite you have to make few adjestments to your project. No need to install more packages just small change to your vite.config.js file. add this

then go to resources folder in your project edit app.css and app.js .

app.css

app.js

then run command npm run dev , dont forget to activate vite option in config/admlte.php

Add new colors

what if you like to add new colors for Adminlte library like (purple,lime,indigo etc...) you can do this by using vite just add these parameters and it will works perfectly ( this approch is temprorary wait until adminlte release their final version).

in app.css add

Create file in resources/css called app.scss

Final step is change vite config to app.scss

app.js still same as before step

Language Selector

You can add language selector with one click in admlte.php by set two options

and you can add more than language in option

one last step you still have to add Admlte middleware to your bootstrap/app.php add

Plugins

if you wish to integrate js plugins into your project you can follow below tutorial. we will test this using Summernote WYSIWYG text editor. first download combiled css,js from their official website https://summernote.org/getting-started/ extract files into public folder for example vendor/summernote. open config/admlte.php and edit Plugins section, add Summernote for it like this

Last step is to activate Plugin in your page By including it

and thats it 😊

• Remember if you used Vite you should import files into app.css. app.js

Widgets

I've created few widget for easy use in your project, I'll try to make more in near future. all widgets use bootstrap 5 color names ( primary - success - danger - warning - light - dark - secondary ), till now there are no AdminLTE colors.

Card

To create Cards with minimal efforts you can use Card widget and pass the required informations to make it works, here are few examples, when I create a wiki page I will give full details on each component.

Info Box

For display small infos with icons or progress bar

you can test updateable Info box with this js code

Small Box

For display one info with beautiful UI

Alert

For display alerts

Contribution

Contributions are welcome! Feel free to fork the repository and submit a pull request.

License

This package is open-sourced software licensed under the MIT license.