Laravel development: How to use Laravel Nova and AdminLTE to generate a backend management interface?

In modern web applications, the management interface is an important part that must be considered. It needs to be intuitive, easy to use and feature-rich. To achieve this goal, Laravel provides two frameworks, Laravel Nova and AdminLTE.

Laravel Nova is an admin panel in Laravel that can generate an admin panel for your Laravel application in minutes. Laravel Nova features a beautiful UI, user management, CMS, and more, allowing developers to create complex applications faster and easier.

On the other hand, AdminLTE is a free backend management template that also provides a nice user interface and necessary JavaScript libraries. It is based on the Bootstrap CSS framework and is also responsive. You can deploy and host AdminLTE locally for a fast, customizable management interface.

In this article, we will introduce how to use Laravel Nova and AdminLTE to generate a beautiful management interface.

Step 1: Install Laravel Nova

To create an admin panel using Laravel Nova, you need to install Laravel Nova first. Please follow the steps below to complete the installation:

1. In your Laravel application, use the following command to install Nova: composer require laravel/nova.
2. Modifyconfig/app.php file, add the following lines to the providers array: LaravelNovaNovaServiceProvider::class.
3. Register Nova's route for users , open the app/Providers/NovaServiceProvider.php file, add the following method:

use LaravelNovaNova;

protected function routes()
{
    Nova::routes()
        ->withAuthenticationRoutes()
        ->withPasswordResetRoutes()
        ->register();
}

Step 2: Create Nova resources

In Laravel Nova, the resource uses for interacting with database models. To create a resource, run the following command:

php artisan nova:resource {resourceName}

This will create a resource class in the app/Nova directory. In a resource class, you define how resource data is managed and displayed. For example, the following code defines how to display the User resource:

namespace AppNova;

use LaravelNovaResource;
use LaravelNovaFieldsID;
use LaravelNovaFieldsText;
use LaravelNovaFieldsGravatar;

class User extends Resource
{
    /**
     * The model the resource corresponds to.
     *
     * @var string
     */
    public static $model = 'App\User';

    /**
     * Get the displayable label of the resource.
     *
     * @return string
     */
    public static function label()
    {
        return __('Users');
    }

    /**
     * Get the displayable singular label of the resource.
     *
     * @return string
     */
    public static function singularLabel()
    {
        return __('User');
    }

    /**
     * Get the fields displayed by the resource.
     *
     * @param  IlluminateHttpRequest  $request
     * @return array
     */
    public function fields(Request $request)
    {
        return [
            ID::make()->sortable(),
            Gravatar::make(),
            Text::make('Name')->sortable(),
            Text::make('Email')->sortable(),
        ];
    }
}

Step 3: Register the Nova resource

Add the following to resources/assets/js/app.js:

import Nova from './vendor/laravel/nova/Nova.js';

Nova.booting((Vue, router, store) => {
    router.addRoutes([
        {
            name: 'nova',
            path: '/nova',
            component: require('./views/Nova'),
        },
    ])
})

Add a route so that Laravel can access Nova:

Route::get('/nova', function () {
    return view('nova');
});

Finally, add the following to your webpack.mix.js file:

    mix.js('resources/js/app.js', 'public/js')
        .sass('resources/sass/app.scss', 'public/css')
        .sourceMaps();

    if (mix.inProduction()) {
        mix.version();
    }

Step 4: Use AdminLTE and Nova Mix

Now you have installed Laravel Nova and created Nova resources. The next step is to add the AdminLTE stylesheet and JavaScript library to the Nova resources in order to create a custom admin panel with AdminLTE styling.

1. Download AdminLTE and extract it into the public directory. Here is the download link: https://adminlte.io/themes/dev/AdminLTE/
2. Create a new view to present the admin panel. It will show up in the route for /nova.
3. Based on the current template, create a nova.blade.php file and insert the following content into the file:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compati ble" content="ie=edge">
    <title>{{ config('app.name') }} - {{__('Nova')}}</title>
    <!-- Include AdminLTE CSS -->
    <link rel="stylesheet" href="/css/adminlte.css">
</head>
<body class="hold-transition sidebar-mini">
    <div id="app">
        <nova/>
    </div>
    <!-- Include AdminLTE and jQuery JavaScript -->
    <script src="/js/adminlte.js"></script>
    <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

4. In the new In the view, include the following content in the body tag:

<div class="wrapper">
    {{-- Main navigation --}}
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
    </nav>
    {{-- Left side column. contains the logo and sidebar --}}
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
    </aside>
    {{-- Content Wrapper. Contains page content --}}
    <div class="content-wrapper">
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        {{-- Your Nova API Resource --}}
                        {{-- Example: @resource('users') --}}
                    </div>
                </div>
            </div>
        </section>
    </div>
    {{-- Main Footer --}}
    <footer class="main-footer">
    </footer>
</div>

5. Create a new Vue Component in your Components and name it Nova. Nova Component needs to register routing and related information when creating:

require('./bootstrap');
    
import Vue from 'vue';
import Nova from './Nova';

import router from './router';
import store from './store';

Vue.component('nova', Nova);
    
const app = new Vue({
    el: '#app',
    router,
    store
});

6. Add a new route to handle nova routing, which should point to the corresponding Vue Component:

import Vue from 'vue';
import Router from 'vue-router';

import Home from './components/Home';
import Nova from './Nova';

Vue.use(Router);

export default new Router({
    // ...
    {
        path: '/nova',
        name: 'nova',
        component: Nova,
    },
    // ...
});

7. Verify that Nova's style sheet and JavaScript are called normally, you can use the following command:

php artisan serve

Now, you have successfully mixed Laravel Nova and AdminLTE Use it to customize the management panel.

Conclusion

In this article, we introduced how to use Laravel Nova and AdminLTE to create a beautiful and flexible admin panel. The powerful combination of these tools can provide developers with a fast way to create applications with complex functionality and help developers realize their business needs faster. I hope readers can learn more about the Laravel framework from this article.

The above is the detailed content of Laravel development: How to use Laravel Nova and AdminLTE to generate a backend management interface?. For more information, please follow other related articles on the PHP Chinese website!