Criando um ToDo List com Folio e Volt
Tags: webdev, laravel, php
Published: 2023-08-02 21:19:25

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](https://nunomaduro.com/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
```


Dentro do nosso projeto agora vamos criar nosso model:

```
php artisan make:model Todo -m
```

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');
```

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',
];
```

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
```
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


```

**_Livewire_**
```
composer require livewire/livewire:v3.0.0-beta.6
```

**_Volt_**

```
composer req livewire/volt:dev-main
php artisan volt:install
```

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
```

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>
```

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9296x7jx5xqutjg9tcih.png)