Laravel Tablar Admin Dashboard
Tags: laravel, php, templat, dashboar
Published: 2022-10-23 14:58:27

<!-- wp:paragraph -->
<p>It's been 2 weeks that I have been working on a New Laravel Admin Dashboard Template.  </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><code>jeroennoten/laravel-adminlte</code> is a well-known admin dashboard laravel package. I used it in different projects. It's highly customizable &amp; feature-rich. The dynamic menu generator with auth guard is the most fantastic feature of this laravel package.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Tabler </strong>is one of the most popular modern HTML dashboard templates. I used this template a few years ago. There is no laravel package like <code>jeroennoten/laravel-adminlte</code> for <strong>Tabler </strong>HTML template. So, I decided to build a new laravel admin dashboard package using the eye-catching design of <strong>Tabler </strong>HTML template. It's based on Bootstrap 5.0. You would get most of the Bootstrap features in this template.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Vite js <em>Next Generation Frontend Tooling</em>. It's super fast &amp; faster than Webpack. I generally use laravel mix to build assets but In some cases, it performs slowly. Vite js is the default assets builder of the latest laravel. So, my plan was to use Vite &amp; add a dynamic menu generator with auth guard.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here it is.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://github.com/takielias/tablar#tabler--laravel--tablar"></a>Tabler + Laravel = TabLar</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Laravel 9.0+ Tabler Dashboard Preset built for Fast Development with Dark Mode. It also contains a dynamic menu generator that helps to maintain navigation permission easily.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Light Mode</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":5827,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://ebuz.xyz/wp-content/uploads/2022/10/light-1024x755.png" alt="" class="wp-image-5827"/><figcaption>Light Mode</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><strong>Dark Mode</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":5828,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://ebuz.xyz/wp-content/uploads/2022/10/dark-1024x749.png" alt="" class="wp-image-5828"/><figcaption>Dark Mode</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>The installation process is pretty straightforward.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Prerequisites</h3>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li>PHP 8.0+</li><li>Fresh Laravel Framework (10.* +)</li><li>Composer</li><li>Node js &gt;= 18.0</li></ul>
<!-- /wp:list -->

<!-- wp:code -->
<pre class="wp-block-code"><code>composer require takielias/tablar</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>First Install the preset</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>php artisan tablar:install</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Now</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>npm install</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Finally, export the config, assets &amp; auth scaffolding.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>php artisan tablar:export-all</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>N.B: You may export individual components. For assets.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>php artisan tablar:export-asset</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>For config.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>php artisan tablar:export-config</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>For auth scaffolding.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>php artisan tablar:export-auth</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>For auth views.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>php artisan tablar:export-views</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Before starting the server don't forget to run migrate</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>php artisan migrate
</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Now run</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>npm run dev
</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Now visit your login route</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":5831,"width":610,"height":628,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://ebuz.xyz/wp-content/uploads/2022/10/login.png" alt="" class="wp-image-5831" width="610" height="628"/><figcaption>Login Page</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>N.B: If you use a virtual host for your laravel application, don't forget to change the <strong>APP_URL</strong></p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">APP_URL=http://your virtual host</pre>
<!-- /wp:preformatted -->

<!-- wp:heading -->
<h2>Usage</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>To use the blade template provided by this package, just create a new blade file and extend the layout with @extends('tablar::page'). You may use the following code snippet:</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">@extends('tablar::page')

@section('content')
    &lt;!-- Page header --&gt;
    &lt;div class="page-header d-print-none"&gt;
        &lt;div class="container-xl"&gt;
            &lt;div class="row g-2 align-items-center"&gt;
                &lt;div class="col"&gt;
                    &lt;h2 class="page-title"&gt;
                        Empty page
                    &lt;/h2&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- Page body --&gt;
    &lt;div class="page-body"&gt;
        &lt;div class="container-xl"&gt;
            @if(config('tablar','display_alert'))
                @include('tablar::common.alert')
            @endif

            &lt;!-- Page Content goes here --&gt;

        &lt;/div&gt;
    &lt;/div&gt;
@endsection</pre>
<!-- /wp:preformatted -->

<!-- wp:paragraph -->
<p><strong>Enable Display Alert</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Make <code>display_alert</code> to <code>true</code> from <strong>tablar.php</strong> config file</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Use Tabler Pagination</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><code>{!! $modelName-&gt;links('tablar::pagination') !!}</code></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Customization</h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":5} -->
<h5>View : Use the below artisan command to export the views</h5>
<!-- /wp:heading -->

<!-- wp:code -->
<pre class="wp-block-code"><code>php artisan tablar:export-views</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>All view files would be exported to <strong>resources/views/vendor/tablar</strong> directory. You can customize it to your requirements.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":5} -->
<h5>Menu: Use the below artisan command to export the config file.</h5>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>For config.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>php artisan tablar:export-config</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>A <strong>tablar.php</strong> file would be available in your config folder. You may customize your navigation bar in the menu block</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><code>'menu' =&gt; [ ....... ]</code></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are <strong>greatly appreciated</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Laravel Tablar Github Repo: <a href="https://github.com/takielias/tablar" target="_blank" rel="noreferrer noopener">https://github.com/takielias/tablar</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>There is a CRUD generator&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Laravel Tablar CRUD Generator <a href="https://github.com/takielias/tablar-crud-generator" rel="noreferrer noopener" target="_blank">https://github.com/takielias/tablar-crud-generator</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":1} -->
<h1>That's It.</h1>
<!-- /wp:heading -->