Inicio
Artículos
Categorias
Etiquetas
Creando el backend del blog -VI
publicado el: 2021-1-29   actualizado el: 2021-1-29   incluido en: Proyecto blog laravel
palabras totales: 1075   tiempo de lectura: 6 mins  

Integrando AdminLTE en el proyecto

Para la gestión de la parte administrativa voy a usar el paquete AdminLTE 3

Voy a generar una url llamada admin que utilizaré para desarrollar la parte de administración del blog. Esta url no la voy a declarar en el fichero web.php sino que creo uno nuevo llamado routes/admin.php dentro del cual iré definiendo las rutas de administrador. Para que laravel reconozca al archivo admin.php como administrador de rutas debo especificárselo dentro del método boot del archivo app/Providers/RouteServiceProvider.php

RouteServiceProvider.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

    /**
     * Define your route model bindings, pattern filters, etc.
     *
     * @return void
     */
    public function boot()
    {
        $this->configureRateLimiting();

        $this->routes(function () {
            Route::prefix('api')
                ->middleware('api')
                ->namespace($this->namespace)
                ->group(base_path('routes/api.php'));

            Route::middleware('web')
                ->namespace($this->namespace)
                ->group(base_path('routes/web.php'));

            Route::middleware('web', 'auth')
                ->prefix('admin')
                ->namespace($this->namespace)
                ->group(base_path('routes/admin.php'));
        });
    }

Como se puede ver al final he añadido a admin.php como administrador de rutas y he especificado el middleware auth para que solo se accesible si estamos autentificados y el método prefix para añadir el prefijo admin a todas las rutas y así no tener que escribirlo en todas.

Creo la primera ruta dentro del fichero administrador de rutas admin.php que acabo de crear y le añado el nombre del controlador que va a gestionar la ruta.

1
2

enrique@enrique-server:/var/www/laravel/blog_laravel$ php artisan make:controller Admin/HomeController
Controller created successfully.

Admin\HomeController.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<?php

namespace App\Http\Controllers\Admin;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

class HomeController extends Controller
{
    public function index()
    {
        return view('admin.index');
    }
}

admin.php

1
2
3
4
5
6

<?php

use App\Http\Controllers\Admin\HomeController;
use Illuminate\Support\Facades\Route;

Route::get('', [HomeController::class, 'index']);

Creo la vista resources/views/admin/index.blade.php y pongo un texto de prueba

index.blade.php

1

Hola Administrador

Voy al navegador me logeo y testeo la ruta y veo que funciona

El siguiente paso es instalar adminLTE.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

enrique@enrique-server:/var/www/laravel/blog_laravel$ composer require jeroennoten/laravel-adminlte
Using version ^3.5 for jeroennoten/laravel-adminlte
./composer.json has been updated
Running composer update jeroennoten/laravel-adminlte
Loading composer repositories with package information
Updating dependencies
Lock file operations: 2 installs, 0 updates, 0 removals
  - Locking almasaeed2010/adminlte (v3.0.5)
  - Locking jeroennoten/laravel-adminlte (v3.5.0)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 2 installs, 0 updates, 0 removals
  - Downloading almasaeed2010/adminlte (v3.0.5)
  - Downloading jeroennoten/laravel-adminlte (v3.5.0)
  - Installing almasaeed2010/adminlte (v3.0.5): Extracting archive
  - Installing jeroennoten/laravel-adminlte (v3.5.0): Extracting archive
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi
Discovered Package: facade/ignition
Discovered Package: fideloper/proxy
Discovered Package: fruitcake/laravel-cors
Discovered Package: jenssegers/agent
Discovered Package: jeroennoten/laravel-adminlte
Discovered Package: laravel/fortify
Discovered Package: laravel/jetstream
Discovered Package: laravel/sail
Discovered Package: laravel/sanctum
Discovered Package: laravel/tinker
Discovered Package: livewire/livewire
Discovered Package: nesbot/carbon
Discovered Package: nunomaduro/collision
Package manifest generated successfully.
75 packages you are using are looking for funding.
Use the `composer fund` command to find out more!

Como ya estoy usando un sistema de autenticación con jetstream me salto el paso de :

1
2

composer require laravel/ui
php artisan ui vue --auth

y paso al siguiente:

1
2
3
4
5

enrique@enrique-server:/var/www/laravel/blog_laravel$ php artisan adminlte:install
Basic assets installed successfully.
Configuration file installed successfully.
Translation files installed successfully.
The installation is complete.

Ya está instalado en el proyecto. Para poder usarlo sigo las instrucciones de su página y dentro de la vista ``resources/views/admin/index.blade.php`

extiendo su plantilla.

index.blade.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

@extends('adminlte::page')

@section('title', 'Blog con Laravel')

@section('content_header')
    <h1>Dashboard</h1>
@stop

@section('content')
    <p>Welcome to this beautiful admin panel.</p>
@stop

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
@stop

@section('js')
    <script> console.log('Hi!'); </script>
@stop

Vuelvo al navegador web para revisar los cambios.

Personalizando la plantilla adminLTE

Para comenzar la personalización abro el archivo php config/adminlte.php y cambio su nombre en el logo y el enlace para que me dirija a página principal situada en el directorio raíz.

adminlte.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

/*
    |--------------------------------------------------------------------------
    | Logo
    |--------------------------------------------------------------------------
    |
    | Here you can change the logo of your admin panel.
    |
    | For more detailed instructions you can look here:
    | https://github.com/jeroennoten/Laravel-AdminLTE/#63-logo
    |
    */

    'logo' => '<b>Blog</b> de Buceo',
.
.
.
.
/*
    |--------------------------------------------------------------------------
    | URLs
    |--------------------------------------------------------------------------
    |
    | Here we can modify the url settings of the admin panel.
    |
    | For more detailed instructions you can look here:
    | https://github.com/jeroennoten/Laravel-AdminLTE/#65-urls
    |
    */

    'use_route_url' => false,

    'dashboard_url' => '/',

Necesito incluir en el menú de navegación de la derecha situado en resources/views/livewire/navigation.blade.php, un enlace que permita a los administradores acceder al panel de administración. <a href="{{route('admin.home')}}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Dashboard</a>

navigation.blade.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

.........
<div x-show="open" x-on:click.away="open = false" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
     <a href="{{route('profile.show')}}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Tu perfil</a>
     <a href="{{route('admin.home')}}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Dashboard</a>
     <form method="POST" action="{{ route('logout') }}">
          @csrf
          <a href="{{ route('logout') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem"  onclick="event.preventDefault();
                  this.closest('form').submit();">Cerra sesion</a>
     </form>
</div>
..........

Lo siguiente que quiero es modificar es el menú de navegación de la barra lateral de la izquierda. Para ello dentro de adminlte.php modifico la sección Menu Items.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

/*
    |--------------------------------------------------------------------------
    | Menu Items
    |--------------------------------------------------------------------------
    |
    | Here we can modify the sidebar/top navigation of the admin panel.
    |
    | For more detailed instructions you can look here:
    | https://github.com/jeroennoten/Laravel-AdminLTE/#8-menu-configuration
    |
    */

    'menu' => [
        [
            'text' => 'search',
            'search' => true,
            'topnav' => true,
        ],
        [
            'text' => 'blog',
            'url'  => 'admin/blog',
            'can'  => 'manage-blog',
        ],
        [
            'text'        => 'pages',
            'url'         => 'admin/pages',
            'icon'        => 'far fa-fw fa-file',
            'label'       => 4,
            'label_color' => 'success',
        ],

Cambio el item pages por dashboard y cambio su icono y su url (uso la ruta en su lugar, es lo mismo).

1
2
3
4
5

        [
            'text'        => 'Dashboard',
            'route'       => 'admin.home',
            'icon'        => 'fas fa-tachometer-alt fa-fw',
        ],

El resultado se puede ver en la siguiente imagen

Larabel
Blog
Mostrando y filtrando posts - V
ESC
«No se puede enseñar nada a un hombre; sólo se le puede ayudar a encontrar la respuesta dentro de sí mismo». Galileo Galilei (1564 - 1642)

Artículos

29

Categorias

14

Etiquetas

27
Tabla de contenidos
Artículos relacionados
Creando el crud de posts - IX
Creando un crud para los post del blog Creo el controlador con los siete métodos 1 2 enrique@enrique-server:/var/www/laravel/blog_laravel$ php artisan make:controller Admin/PostController -r Controller created successfully. Lo modifico para recibir objetos post y las vistas a los métodos correspondientes. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 <?
2021-2-3
Creando el crud de etiquetas - VIII
Creando un crud para las etiquetas del blog Sigo los mismos pasos que para las categorias. Desde la consola de comandos y situado dentro del proyecto creo el controlador con sus 7 métodos para administrar las etiquetas desde el backend. 1 2 enrique@enrique-server:/var/www/laravel/blog_laravel$ php artisan make:controler Admin/TagController -r Controller created successfully.
2021-1-31
Creando el crud de categorías - VII
Creando un crud para las categorías del blog Genero en admin.php una ruta de tipo resources que me genere las rutas para el crud de las categorías. Antes creo un controlador para categorías que me genere ya los 7 métodos. 1 2 enrique@enrique-server:/var/www/laravel/blog_laravel$ php artisan make:controller Admin/CategoryController -r Controller created successfully.
2021-1-30
Mostrando y filtrando posts - V
Mostrando el detalle de un post Creo una ruta en web.php para mostrar el detalle de un post. web.php 1 Route::get('posts/{post}', [PostController::class, 'show'])->name('posts.show'); Creo en método show en el controllador PostController.php al que le paso como parámetro un objeto post. Dentro de el recupero los post que pertenecen a la misma categoría que el en la variable $similares y se los paso junto con la variable $post a la vista posts.
2021-1-28
Crear un listado de post en la página principal - IV
Listado de posts Voy a mostrar un listado con los pos almacenados en la base de datos, para ello debo empezar creando un controlador en el que recogeré una variable con los post y desde donde llamar a una vista para mostrarlos. Creo un controlador llamado PostController. 1 enrique@enrique-server:/var/www/laravel/blog_laravel$ php artisan make:controller PostController entro en la clase app/Http/Controllers/PostController.
2021-1-28