How to Create the Best Looking Laravel 11 Admin Panel: A Step-by-Step Guide

Building an administration interface is essential for most web applications, but it's often perceived as a mundane and time-consuming task. However, with Laravel Craftable PRO, a powerful toolset in the Laravel ecosystem, you can change this perspective and build a complex admin panel in a matter of hours. AND! We have released support for Laravel 11! 🥳 

What is Craftable PRO?

Craftable PRO is an advanced admin panel and CRUD (Create, Read, Update, Delete) generator leveraging the VILT stack (VueJs, InertiaJs, Laravel, and TailwindCSS). This tool enables rapid development of admin interfaces for Laravel applications, offering built-in functionalities like user management, permission controls, a media library, and more.

Craftable PRO streamlines your workflow by eliminating the monotonous task of coding CRUD interfaces manually. This not only frees up your time but also reduces project costs, allowing you to concentrate on more innovative aspects of your work. Embrace the efficiency of Craftable PRO and move past the endless cycle of boilerplate code.

Core Features

Craftable PRO comes pre-loaded with essential features to jumpstart your project with minimal effort. Below are key highlights.

CRUD Generator

A standout feature of Craftable PRO, the CRUD generator facilitates effortless creation of your admin panel based on your database schema. Utilize the straightforward craftable-pro:generate-crud artisan command for basic operations, or opt for the wizard mode (craftable-pro:generate-crud --wizard) for a tailored approach. This lets you define visibility for table columns, establish relationships, and configure media collections.

Craftable PRO ensures that all generated content resides within your project's directory, allowing for easy customization. Modify forms, swap components, or adjust features to align with your project requirements, demonstrating Craftable PRO's edge over competitors by offering absolute freedom, flexibility, and control.

User Management

With Craftable PRO, managing users is straightforward, including functionalities for inviting users via email and enabling self-registration.

Permission Management

Efficiently handle permissions across different roles within your project, simplifying the process of modifying access to specific functionalities. Craftable PRO is designed to easily incorporate additional roles into your database as needed.

Translation Management

This feature places translation management at your fingertips. Scan your project for translatable strings and edit them directly. Adding support for more languages is as simple as introducing a new locale in the settings, eliminating the need to tweak configurations. Translations can be made available in a public file, facilitating access for mobile or frontend applications.

Alright, I'm prepared to integrate Craftable PRO into my project! However, I'm not sure how to proceed...

Setting Up Your Laravel Project with Craftable PRO

To kick things off, you'll need a fresh Laravel installation. If you're already familiar with Laravel, you can skip the basics and dive right in. However, for this tutorial, we'll be using Laravel with Sail and PostgreSQL for those looking to change things up from MySQL. You can easily install Laravel by running the following command:

curl -s "https://laravel.build/craftable-pro-example?with=pgsql" | bash

Installing Craftable PRO

Once you have Laravel installed, it's time to incorporate Craftable PRO into your project. Make sure to get your license. With your license in hand, proceed by adding the private repository to Composer and then require the Craftable PRO package:

composer config repositories.craftable-pro composer https://packages.craftable.pro composer require brackets/craftable-pro

Next, run the installation commands to publish the required files and prepare your project. Don’t forget to get your npm packages set up as well:

sail artisan craftable-pro:install npm install

You’ll find further assistance in the detailed installation guide on the Craftable PRO documentation.

A Glimpse Into Craftable PRO

With Vite running after npm run craftable-pro:dev, you can access your Craftable PRO admin panel at https://localhost/admin. The default interface comes equipped with a variety of powerful features. For example, not only does it cover user administration and permissions management, but you also have access to a media library for easily handling file uploads.

Furthermore, the Craftable PRO dashboard itself is easily extendable. While the default setup offers a substantial start, let's customize our admin panel to manage authors and their respective articles.

Database Migrations and Model Creation

Start by creating migrations for your models, which lay the foundation for the CRUD generator. Creating a migration for the authors table can look something like this:

// database/migrations/_create_authors_table.php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
    public function up()
    {
        Schema::create('authors', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email');
            $table->timestamps();
            $table->softDeletes();
        });
    }
};

Next, you’ll want to tackle the articles table with its more complex requirements, such as translatable title and content fields, author associations, and publishable status:

// database/migrations/_create_articles_table.php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    public function up()
    {
        Schema::create('articles', function (Blueprint $table) {
            $table->id();
            $table->jsonb('title');
            $table->jsonb('content');
            $table->foreignId('author_id')->constrained('authors');
            $table->dateTime('published_at')->nullable();
            $table->timestamps();
            $table->softDeletes();
        });
    }
};

After setting the migrations up as desired, execute them using sail artisan migrate.

Generating CRUD for Authors and Articles

Now, let’s generate the CRUD functionality. For the relatively straightforward authors table, use the command:

sail artisan craftable-pro:generate-crud authors --media-collections=avatar --image-collections=avatar

After you run the generate command mentioned before, you can check out the authors' section by visiting https://localhost/admin/authors. Here, you can add, change, look for, and remove authors easily. Everything is set up and ready for you to use.

For the more intricate articles table, utilize the wizard provided by Craftable PRO to guide you through the process. Start by executing:

sail artisan craftable-pro:generate-crud articles -w

The wizard ensures thorough customization of your CRUD interface, from deciding on visible columns and relations to adding media collections. Follow the prompts that guide you through every facet of the generated administration:

Initially, the generator prompts you to choose which columns to display on the listing page.

I opted for all choices except for the content. Following that, we're given the option to select sortable columns. Opting for the default, all columns chosen previously will be sortable.

We don't need to specify anything to keep the default settings. Moving on, we decide which columns should be editable on the form page, sticking with the default to allow editing of all columns.

Since the title and content columns are set as jsonb, they're identified as capable of translation.

Next, there's a choice about incorporating a publishable feature by selecting the published_at column, enabling direct publishing of articles from the listing.

Like the authors' table, it's possible to set up media collections for the Article model, such as defining a collection as images to auto-generate preview thumbnails for uploaded media.

The subsequent questions focus on defining relationships for the Article model, like associating an author_id column from our migration with a specific relationship.

After establishing the first relationship, additional ones can be added. Lastly, the wizard asks about enabling an export feature for the model, which would allow exporting records to an excel file. I chose to skip this feature.

The outcome will be again a fully prepared CRUD interface for managing articles. It's important to note that this setup includes handling the relationships with articles - there's a select option provided that links to Authors.

Customizing Your Admin Panel

With the initial CRUD operations in place, preview the respective modules for authors (https://localhost/admin/authors) and articles (https://localhost/admin/articles). Here's where you tailor the admin panel to your needs. Craftable PRO generates fully functioning lists and forms, but you have complete freedom to modify anything you want.

Consider some of the customizations you might perform:

1. Changing Sidebar Icons: Customize the sidebar icons by editing the Vue component at resources/js/craftable-pro/Components/Sidebar.vue.
2. Improving Listings with Avatars: Update the Index.vue components for each model to include avatars from the media collections next to author names.
3. Adding More Locales: Easily add additional languages for article translations through the Craftable PRO settings page.
4. Changing the Color Theme: With TailwindCSS, adjust anything from colors to fonts in craftable-pro.tailwind.config.js.

Through these customizations, you can further modify your admin panel, enhancing user experience and efficiency.

Beneath the User Interface: Craftable PRO's Backend Brilliance

The CRUD generator's flexibility allows you to swiftly scaffold your application's backend and adjust as necessary. The toolkit accommodates extra functionality for user and permissions management, which is vital for any growing project. You can directly invite users, manage various roles and permissions, and handle translations all within Craftable PRO's intuitive interface.

In summary, Craftable PRO, with its VILT stack integration, supports fast-paced development without negating quality and flexibility. You can manage your elaborate backend with an all-encompassing admin panel, crafted beautifully in just a few hours.

Experience Craftable PRO firsthand by exploring public demo. Dive into the full capabilities of this Laravel extension and see how it can elevate your web applications to the next level.