DEV Community

Cover image for Criando um ToDo List com Folio e Volt
Allisson Rafael de Brito Araujo
Allisson Rafael de Brito Araujo

Posted on

Criando um ToDo List com Folio e Volt

Será lançado em breve o Laravel 11 e com ele muitos outros lançamentos como por exemplo: Folio e Volt.]

O Folio permite que sejam criadas rotas baseando-se em arquivos e o *Volt * é uma api que permite que seja utilizado código PHP, Models e Diretivas do Blade em um mesmo arquivo.

Sabendo do que se trata, vamos direto ao ponto, iremos utilizar o tutorial do Nuno Maduro que pode ser acessado em ToDo Application With Laravel, Folio and Volt

Iniciando um novo projeto Laravel e criando nosso ToDo APP

Para começar o desenvolvimento, precisamos ter o Laravel 10+ no nosso projeto e para isso iremos baixar usando:

composer req laravel/laravel todo-app
Enter fullscreen mode Exit fullscreen mode

Dentro do nosso projeto agora vamos criar nosso model:

php artisan make:model Todo -m
Enter fullscreen mode Exit fullscreen mode

Com o comando acima criamos o nosso model já com a migration e em seguida vamos abrir a mesma no nosso editor/ide preferido. Podemos localizá-la em database/migrations 2023_xx_xx_xxxxxx_create_todos_table.php

E vamos adicionar uma nova coluna chamada description:

A linha a seguir pode ser inserida abaixo da linha 15 da migration

$table->string('description');
Enter fullscreen mode Exit fullscreen mode

Nosso próximo passo é habilitar a nossa coluna description para receber dados e para isso vamos até nossa *model * Todo.php e nela vamos adicionar o seguinte código:

protected $fillable = [
   'description',
];
Enter fullscreen mode Exit fullscreen mode

Agora dentro do .env configure as informações de acordo com o seu servidor e banco de dados.

Precisamos agora executar a migration para criar o banco de dados e tabelas e para isso usamos o comando:

php artisan migrate
Enter fullscreen mode Exit fullscreen mode

Neste momento se não tiver nenhum banco de dados criado o artisan perguntará se deseja criar o banco, se esse for o caso, diga que sim (yes).

Show de Bola! Temos boa parte do nosso projeto criada, agora vamos instalar os packages Folio e Livewire.

Para instalar os packages temos que está dentro do nosso projeto via Terminal e rodar o seguinte comando via composer:

Folio

composer req laravel/folio:dev-master
php artisan folio:install


Enter fullscreen mode Exit fullscreen mode

Livewire

composer require livewire/livewire:v3.0.0-beta.6
Enter fullscreen mode Exit fullscreen mode

Volt

composer req livewire/volt:dev-main
php artisan volt:install
Enter fullscreen mode Exit fullscreen mode

Se você acessou a página referência do Nuno pode estranhar os comandos diferentes, porém com o exemplo que está lá, tive problemas e consegui instalar apenas dessa forma que escrevi.

Com tudo pronto agora vamos gerar nossa primeira view com o folio com o comando:

php artisan make:folio todos
Enter fullscreen mode Exit fullscreen mode

A seguinte mensagem deve ser exibida no seu terminal:

INFO Page [dados do sistema e diretórios]*todo-app\resources\views\pages/todos.blade.php] created successfully.*

Agora temos nossa view criada com sucesso com o Folio e o mais interessante é que usando o Folio não precisamos criar rota para a mesma pois o mesmo se baseia em arquivos para o roteamento, bastando acessar a nossa view pela url url/todos e Voalá!

E para finalizar mostrando o quão prático é e como podemos misturar lógica, blade e livewire em um mesmo local acesse a view criada em:
\resources\views\pages/todos.blade.php

E dentro dela cole o seguinte código:

<?php

use function Livewire\Volt\state;
use App\Models\Todo;

state(description: '', todos: fn () => Todo::all());

$addTodo = function () {
    Todo::create(['description' => $this->description]);

    $this->description = '';
    $this->todos = Todo::all();
}; ?>

<html>
    <head>
        <title>Todos</title>
    </head>
    <body>
    @volt
        <div>
            <h1>Add Todo </h1>
            <form wire:submit="addTodo">
                <input type="text" wire:model="description">
                <button type="submit">Add</button>
            </form>

            <h1>Todos</h1>
            <ul>
                @foreach ($todos as $todo)
                    <li>{{ $todo->description }}</li>
                @endforeach
            </ul>
        </div>
    @endvolt
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

E execute atualize o seu projeto! A tela que deve ser exibida é a seguinte:

Image description

Top comments (0)