Olá Pessoal!!

Nesse tutorial irei demonstrar para vocês como criar um CRUD no admin do Bagisto e posteriormente exibir os dados no admin.

Esse tutorial será divido em a três partes. Na primeira parte (que é esta),será demonstardo como criar uma página de cadastro no admin.

Para esse tutorial, iremos criar um módulo de cadastro de lojas. Esse módulo irá possuir 2 campos, que serão o nome da loja e seu endereço.

Então.. vamos lá?

Primeiro iremos criar um módulo base. Nesse exemplo, o nome da vendor será LuanCS e o nome do módulo será MinhasLojas. Então após criado o módulo base, a estrutra será a seguinte:

Criando a Model e a Migration

Após a criação do módulo base, rode o seguinte comando na raíz do projeto:

php artisan make:model -m Loja

Rodardando o comando acima, será criado uma Model chamada Lojas dentro da pasta app da raíz da aplicação, e uma migration create_lojas_table dentro da pasta database/migrations também a partir da raíz da aplicação.

Após rodar o comando, copie o arquivo Loja.php que foi gerado dentro da pasta app e cole no diretório src/Models, adicionando o seguinte trecho de código:

    protected $table = 'lojas';
    protected $fillable = ['nome', 'endereco'];

Deixando o arquivo dessa maneira:

<?php

namespace LuanCS\MinhasLojas\Models;

use Illuminate\Database\Eloquent\Model;

class Loja extends Model
{
    protected $table = 'lojas';
    protected $fillable = ['nome', 'endereco'];
}

Agora copie o arquivo da migration que foi gerado em database/migrations e cole em src/Database/Migrations.

Nesse momento a estrutura do módulo, estará assim:

Agora abra o arquivo da migration, e substitua o código do método up, pelo código abaixo:

Schema::create('lojas', function (Blueprint $table) {
    $table->bigIncrements('id');
    $table->string('nome');
    $table->string('endereco');
    $table->timestamps();
});

Após criarmos o model e amigration, agora vamos adicionar a migration ao nosso ServiceProvider. Abra o arquivo src/Providers/MinhasLojasServiceProvider, e na função boot adicione o seguinte código:

$this->loadMigrationsFrom(__DIR__ . '/../Database/Migrations');

Então podemos rodar o seguinte comando na raíz do projeto:

php artisan migrate

Fazendo isso, a tabela será criada. Conforme imagem abaixo:

Criando um Menu Para o Módulo

Para fazer a listagem das lojas no admin, e poder cadastrar novas lojas, iremos criar um menu no admin, para facilitar o acesso a listagem e/ou cadastro de novas lojas.

Para isso, crie uma pasta chamada Config dentro de src, e dentro da pasta Config crie um arquivo com o nome menu-admin.php e adicione o seguinte código ao arquivo:

<?php
return [
    [
        'key' => 'minhaslojas',
        'name' => 'Minhas Lojas',
        'route' => 'minhaslojas.admin.index',
        'sort' => '1',
        'icon-class' => 'dashboard-icon'
    ]
];

Depois abra o arquivo src/Providers/MinhasLojasServiceProvider, e adicione a seguinte linha no método register:

$this->mergeConfigFrom(dirname(__DIR__) . '/Config/menu-admin.php', 'menu.admin');

Agora se acessarmos o admin do bagisto, será exibido um erro, informando que a rota minhaslojas.admin.index não existe. Para resolvermos isso, vamos criar uma rota com esse nome no próimo passo.

Criando o arquivo de Rotas

Crie uma pasta chamada Http, dentro de src, e dentor dessa pasta crie um arquivo chamado routes.php com o seguinte código:

<?php
Route::prefix('admin')->group(function () {
    Route::get('minhaslojas','LuanCS\MinhasLojas\Http\Controllers\Admin\MinhasLojasController@index')->name('minhaslojas.admin.index');
    Route::get('minhaslojas/create', 'LuanCS\MinhasLojas\Http\Controllers\Admin\MinhasLojasController@create')->name('minhaslojas.admin.create');
    Route::post('minhaslojas/store', 'LuanCS\MinhasLojas\Http\Controllers\Admin\MinhasLojasController@store')->name('minhaslojas.admin.store');
    Route::get('minhaslojas/{id}', 'LuanCS\MinhasLojas\Http\Controllers\Admin\MinhasLojasController@edit')->name('minhaslojas.admin.edit');
    Route::post('minahslojas/{id}','LuanCS\MinhasLojas\Http\Controllers\Admin\MinhasLojasController@update')->name('minhaslojas.admin.update');
    Route::get('minhaslojas/delete/{id}', 'LuanCS\MinhasLojas\Http\Controllers\Admin\MinhasLojasController@destroy')->name('minhaslojas.admin.destroy');
});

Fazendo isso, já teremos as rotas básicas da aplicação, não precisando mexer futuramente nesse arquivo.

Novamente abra o arquivo src/Providers/MinhasLojasServiceProvider e adicione o seguinte código dentro da funcão boot:

include __DIR__ . '/../Http/routes.php';

Fazendo isso o bagisto irá começar a reconheer as rotas do módulo. E agora se acessar o admin do bagisto, nao será exibido o erro de rotas inválida.

Criando o Controller do Módulo

Dentro da pasta src/Http crie a seguinte estrutura Controllers/Admin e dentro da pasta Admin, crie um arquivo com o nome MinhasLojasController com o seguinte conteúdo:

<?php
namespace LuanCS\MinhasLojas\Http\Controllers\Admin;

use App\Http\Controllers\Controller;

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

Criando a view index para a listagem e cadastro

Agora que o controller está criado, precisaremos criar um arquivo de view, para podermos visualizar,cadastrar e editar as nossas lojas. Nesse primeiro momento, iremos crira um arquivo de visualização, que somente terá um link que será enviado para o cadastro de novas Lojas.

Crie a seguinte estrutura de pastas: src/Resources/views/admin. Dentro da pasta admin crie um arquivo com o nome: index.blade.php e insira o seguinte código no arquivo:

@extends('admin::layouts.content')

@section('page_title')
    Minhas Lojas
@stop

@section('content')
    <div class="content">
        <div class="page-header">
            <div class="page-title">
                <h1>Minhas Lojas</h1>
            </div>
            <div class="page-action">
                <a href="{{route('minhaslojas.admin.create')}}" class="btn btn-lg btn-primary">Nova Loja</a>
            </div>
        </div>
    </div>
@endsection

Após isso abra o arquivo src/Providers/MinhasLojasServiceProvider e adicione o seguinte código na função boot:

$this->loadViewsFrom(__DIR__ . '/../Resources/views', 'minhaslojas');

Agora ao acessar a url /admin/minhaslojas/index, ou clicar sobre o menu Minhas Lojas no admin, a seguinte tela será exibida:

Após efetuar os passos demonstrados acima, a estrutura do módulo ficará conforme demonstrado na imagem abaixo:

Agora vamos para a view de cadastro de uma nova Loja!!!

Criando a View de Cadastro

Para efetuarmos o cadastro de uma nova Loja, primeiro iremos criar o arquivo de visualização. Então crie um arquivo chamado create.blade.php dentro da pasta src/Resources/views/admin, com o seguinte conteúdo:

@extends('admin::layouts.content')

@section('page_title')
    Nova Loja
@stop

@section('content')
    <div class="content">
        <form method="POST" action="{{ route('minhaslojas.admin.store') }}" @submit.prevent="onSubmit">
            <div class="page-header">
                <div class="page-title">
                    <h1>
                        Nova Loja
                    </h1>
                </div>

                <div class="page-action">
                    <button type="submit" class="btn btn-lg btn-primary">Save</button>
                </div>
            </div>

            <div class="page-content">
                <div class="form-container">
                    @csrf()
                    <div class="control-group" :class="[errors.has('nome') ? 'has-error' : '']">
                        <label for="nome" class="required">Nome</label>
                        <input type="text" class="control" name="nome" v-validate="'required'" value="{{ old('nome') }}">
                    </div>

                    <div class="control-group" :class="[errors.has('endereco') ? 'has-error' : '']">
                        <label for="last_name" class="required">Endereço</label>
                        <input type="text" class="control" name="endereco" v-validate="'required'" value="{{ old('nome') }}">
                    </div>
                </div>
            </div>
        </form>
    </div>
@stop

Criando os métodos no Controller

Agora precisarems criar os métodos responsáveis por exibir e salvar o cadastro de uma nova loja. Para isso abra o arquivo src/Controllers/Admin/MinhasLojasController e adicione os seguibtes métodos:

public function create()
{
    return view('minhaslojas::admin.create');
}

public function store(Request $request)
{
    $loja = new Loja();
    $loja->nome = $request->nome;
    $loja->endereco = $request->endereco;
    $loja->save();
    return redirect(route('minhaslojas.admin.index'));
}

public function update(Request $request, $id)
{

}

public function destroy($id)
{

}

inclua também o caminho da Model no use da class, e o caminho do Request, para conseguir pegar os dados ao salvar a loja. Conforme código abaixo:

use LuanCS\MinhasLojas\Models\Loja;
use Illuminate\Http\Request;

Com isso o arquivo ficará dessa maneira:

<?php
namespace LuanCS\MinhasLojas\Http\Controllers\Admin;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use LuanCS\MinhasLojas\Models\Loja;

class MinhasLojasController extends Controller
{
    public function index()
    {
        return view('minhaslojas::admin.index');
    }
    public function create()
    {
        return view('minhaslojas::admin.create');
    }

    public function store(Request $request)
    {
        $loja = new Loja();
        $loja->nome = $request->nome;
        $loja->endereco = $request->endereco;
        $loja->save();
        return redirect(route('minhaslojas.admin.index'));
    }

    public function update(Request $request, $id)
    {

    }

    public function destroy($id)
    {

    }
}

Agora ao acessarmos o Menu Minhas Lojas e clicarmos no botão Nova Loja, a seguinte tela será exibida:

Ao colocar os dados da loja e clicarmos em salvar, a loja será salva. Ainda ela não está aparecendo na listagem, pois ainda não criamos a listagem de lojas. Mas ao acessar a tabela e fazer um select nela, podemos perceber que o registro já se encontra lá. Conforme imagem abaixo:

Com isso terminamos essa primeira parte do tutorial!!!

Caso queiram baixar esse projeto, acessem o seguinte repositório, na tag 1.0:

https://github.com/luancschmitz/modulo-bagisto-minhas-lojas/tree/1.0

No próximo tutorial será explicado como fazer a listagem das Lojas Cadastradas.

Então é isso Pessoal!!! Espero que tenham gostado :)