Home
Blog
Laravel Starter Admin Dashboard

Laravel Starter Admin Dashboard

January 25, 2023

Multi-Purpose Laravel Application | Livewire Application | Laravel Admin Dashboard

What is Laravel?

Laravel is a PHP web framework offering a comprehensive set of tools and resources useful for developing high-quality web applications. It follows the Model-View-Controller (MVC) architectural design pattern.

It is packed with built-in features and a wide variety of compatible packages and extensions, making it one of the most popular PHP web frameworks.

Advantages of Laravel

Here are some key advantages of using the Laravel framework.

The Laravel framework is easy to use, simple, and quick. As it is one of the most widely used PHP frameworks, many experienced developers are familiar with it and might have developed interactive web applications.
It offers advanced security features, enabling developers to protect their websites from cyber attacks. It uses a Bcrypt hashing algorithm, meaning that it does not save any password in the database.
Laravel supports out-of-the-box caching, which significantly enhances a website’s performance. Also, developers can effortlessly perform other speed optimization techniques, like database indexing and memory use reduction.
This framework has a built-in website that can efficiently handle the volume of traffic coming to a website. Therefore, it is also beneficial for traffic handling.
Using Laravel, developers can build fully-fledged and responsive eCommerce websites or B2B sites.
Laravel has clean APIs, making it easier to integrate your website with third-party applications.

Laravel Installation

You will have to follow the steps given below for installing Laravel onto your system −

Step 1

Visit the following URL and download composer to install it on your system.

https://getcomposer.org/download/

Step 2

After the Composer is installed, check the installation by typing the Composer command in the command prompt

STEP 3

composer global require laravel/installer

STEP 4

Create a new laravel project

laravel new example-app

STEP 5

After the project has been created, start Laravel's local development server using the Laravel's Artisan CLI serve command:

php artisan serve

Laravel Cheatsheet

https://learninglaravel.net/cheatsheet/

Key concepts in Livewire

Activating Livewire on a page

To get Livewire working on a page, you need to include the Livewire styles and scripts on each page that need them. Usually, these would go into your base template. You’d do that using @livewireStyles and @livewireScripts:

//app.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>@yield('title')</title>
    @livewireStyles
</head>
<body>
    @yield('content')
    @livewireScripts
</body>
</html>

Creating a Laravel Blade component

You’d create a Laravel Blade component by running the following command:

php artisan make:component Alert

This will create a new Alert.php class file and place it in the App\Views\Components folder. Then, a corresponding view template is created and placed in resources/views/components. To display the component, you can then use this Blade syntax: <x-alert/>.

Creating a Livewire component

To create a Livewire component, run the following command:

php artisan make:livewire Alert

The command will also create two new files: app\Http\Livewire\Alert.php and a view template resources/views/livewire/alert.php.

As you can see, the commands look quite similar. The only major difference is that with Livewire components, there’s a real-time sync (no page refresh required) between the component class and its view template.

Livewire properties

Public properties on your component classes are made available to the component template view. It doesn’t stop there — the value of the property is synchronized in real time to the view, such that when you update the value of the property in the view, it is automatically updated in the component class.

//App\Http\Livewire\Alert.php

<?php

class Alert extends Component{

public $message = "Our alert message";

}

// livewire/alert.blade.php

<div>

<br/>

</div>

Data validation

Livewire makes data validation seamless. To validate data coming from a form template view, you’d write a $rules property that contains your validation rules, just as you would in Laravel. Thereafter, you call the $this→validate() in the method doing the validation.

Let’s look at a form for creating a blog post:

class CreatePost extends Component
{
    public $title, $body;
    public $success;
    protected $rules = [
        'title' => 'required|string|max:220',
        'body' => 'required'
    ];

    public function render()
    {
        return view('livewire.create-post')
            ->extends('layouts.app')
            ->section('content');
    }
    public function create(){
        $this->validate();
        Post::create([
            'title' => $this->title,
            'slug' => Str::slug($this->title),
            'body' => $this->body,
            'author_id' => auth()->id()
        ]);

        $this->success = true;
    }
}

// livewire/create-post
<div class="container">
    @if ($success)
        <div class="alert alert-success">
            Post has been created successfully
        </div>
    @endif
    <form wire:submit.prevent="create">
        <div class="form-group">
            <label for="Post title">Post title</label>
            <input wire:model="title" type="text" name="title" id="title" class="form-control" placeholder="Title of the post">
            @error('title') <span class="error">{{ $message }}</span> @enderror
        </div>
        <div class="form-group">
            <label for="Post body">Post Body</label>
            <textarea name="body" id="body" placeholder="Body of post here..." wire:model="body" class="form-control"></textarea>
            @error('body') <span class="error">{{ $message }}</span> @enderror
        </div>
        <div>
            <button class="btn btn-primary" type="submit">Publish</button>
        </div>
    </form>
</div>

In the form code above, when the user submits the post, and it doesn’t pass the validation, the validation errors are displayed, all without a page refresh.

Template Directives

These are directives added to elements within Livewire component templates.

Directive	Description
wire:key="foo"	Acts as a reference point for Livewire's DOM diffing system. Useful for adding/removing elements, and keeping track of lists.
wire:click="foo"	Listens for a "click" event, and fires the "foo" method in the component.
wire:click.prefetch="foo"	Listens for a "mouseenter" event, and "prefetches" the result of the "foo" method in the component. Then, if it is clicked, will swap in the "prefetched" result (without an extra request), if it's not clicked, will throw away the cached result.
wire:keydown.enter="foo"	Listens for a keydown event on the enter key, which fires the "foo" method in the component.
wire:foo="bar"	Listens for a browser event called "foo". (You can listen for any browser DOM event - not just those fired by Livewire).
wire:model="foo"	Assuming $foo is a public property on the component class, every time an input element with this directive is updated, the property synchronizes with its value.
wire:model.debounce.100ms="foo"	Debounces the input events emitted by the element every 100 milliseconds.
wire:model.lazy="foo"	Lazily syncs the input with its corresponding component property at rest.
wire:model.defer="foo"	Defers syncing the input with the Livewire property until an "action" is performed. This saves drastically on server roundtrips.
wire:poll.500ms="foo"	Runs the "foo" method on the component class every 500 milliseconds.
wire:init="foo"	Runs the "foo" method on the component immediately after it renders on the page.
wire:loading	Hides the element by default, and makes it visible while network requests are in transit.
wire:loading.class="foo"	Adds the foo class to the element while network requests are in transit.
wire:loading.class.remove="foo"	Removes the foo class while network requests are in transit.
wire:loading.attr="disabled"	Adds the disabled="true" attribute while network requests are in transit.
wire:dirty	Hides the element by default, and makes it visible while the element's state is "dirty" (different from what exists on the backend).
wire:dirty.class="foo"	Adds the foo class to the element while it's dirty.
wire:dirty.class.remove="foo"	Removes the foo class while the element is dirty.
wire:dirty.attr="disabled"	Adds the disabled="true" attribute while the element's dirty.
wire:target="foo"	Scopes wire:loading and wire:dirty functionality to a specific action.
wire:ignore	Instructs Livewire to not update the element or its children when updating the DOM from a server request. Useful when using third-party JavaScript libraries within Livewire components.
wire:ignore.self	The "self" modifier restricts updates to the element itself, but allows modifications to its children.

Artisan Commands

These are the artisan commands Livewire makes available to make frequent tasks like creating a component easier.

Name	Params
artisan make:livewire	Create a new component
artisan livewire:make	Create a new component
artisan livewire:copy	Copy a component
artisan livewire:move	Move a component
artisan livewire:delete	Delete a component
artisan livewire:touch	Alias for livewire:make
artisan livewire:cp	Alias for livewire:copy
artisan livewire:mv	Alias for livewire:move
artisan livewire:rm	Alias for livewire:delete
artisan livewire:stubs	Publish Livewire stubs (used in the above commands) for local modification
artisan livewire:publish	Publish Livewire's config file to your project (config/livewire.php)
artisan livewire:publish --assets	Publish Livewire's config file AND its frontend assets to your project
artisan livewire:configure-s3-upload-cleanup	Configure your cloud disk driver's S3 bucket to clear temporary uploads after 24 hours

Conclusion

Livewire bridges the gap between backend and frontend. You get the benefit of real-time interactivity without having to write a lot of JavaScript by yourself.

Github Link : https://github.com/fullstacksagarofficial/laravel-livewire-admin