Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rafaelblum/calculadora-livewire
Essa é uma aplicação Laravel com Livewire. Este projeto aborda de forma introdutória a utilização do Livewire, com sua reatividade, componentes, propriedades e diretórios.
https://github.com/rafaelblum/calculadora-livewire
blade calculator-application laravel livewire php8
Last synced: 4 days ago
JSON representation
Essa é uma aplicação Laravel com Livewire. Este projeto aborda de forma introdutória a utilização do Livewire, com sua reatividade, componentes, propriedades e diretórios.
- Host: GitHub
- URL: https://github.com/rafaelblum/calculadora-livewire
- Owner: RafaelBlum
- Created: 2023-04-03T16:05:56.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-08-16T12:40:43.000Z (about 1 year ago)
- Last Synced: 2023-08-16T14:41:27.579Z (about 1 year ago)
- Topics: blade, calculator-application, laravel, livewire, php8
- Language: PHP
- Homepage: https://laravel-livewire.com/docs/2.x/quickstart
- Size: 663 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## _Projeto calculadora_
Este é uma `aplicação Laravel` utilizando a "extensão" `Livewire`. Uma extensão reativa, que agiliza o desenvolvimento
com `componentes reativo` "sem" o uso de javascript (Existe o javascript, mas não precisamos se preocupar com desenvolvimento).
> Com **livewire** temos componentes responsivos e juntamente com o blade, temos uma ferramenta poderosa. Componentes que podemos atualizar sem
>precisar atualizar toda página de forma fácil e rápida.
##### Instalações
- [--] composer create-project laravel/laravel name-project
- [--] composer require livewire/livewire
##### Comandos
- `php artisan serve --port=8000` [inicializando servidor]
- `php artisan livewire:make Calculator ` [Criando componente calculadora]
###### Tecnologias (serviços externos, libs, frameworks, hospedagem etc.)
- Php `8.2`
- Laravel `9.52.5`
- Livewire `2.12`
## Desenvolvimento (lógica)
`View blade *calculator*`
~~~~~~view
~~~~~~
| Diretiva | Explicação |
| :--- | :--- |
| `wire:model` | *Recebe uma propriedade "tot" pública da classe do componente, e toda vez que um elemento de entrada com esta diretiva é atualizado, a propriedade sincroniza com seu valor* |
| `wire:click` | *Escuta um evento "click" e aciona o método "math" no componente.* |
~~~~~~
~~~~~~
`Controller *Calculator*`
~~~~~~Calculator
public $math = '';
public $tot = 0;
public function render()
{
return view('livewire.calculator', [
"title" => "Calculadora"
]);
}
public function addMath($num)
{
$this->math .= $num;
}
public function result()
{
$this->tot = eval('return ' . $this->math . ';');
}
public function clear()
{
$this->math = '';
$this->tot = 0;
}
~~~~~~
| Classe | Explicação |
| :--- | :--- |
| `public $math` | *As propriedades nos componentes sempre precisamos declarar como públicas* |
| `function render` | *Metodo **render** é como se fosse um metodo construtor de uma classe Php e renderiza a view blade e podemos passar variáveis. * |
##### Exemplos 1
Componente de descrição em um input com reatividade. A variável `pública` no controller do componente.
~~~~~~exemplo
{{$description}}
~~~~~~
##### Exemplos 2
Componente de botão com reatividade de somar e diminuir. wire:click acessa o metodo no controller do componente.
~~~~~~button
{{$number}}
Somar
Subtrair
~~~~~~
~~~~~~metodos
public function addPlus()
{
$this->number++;
}
public function addMinus()
{
$this->number--;
}
~~~~~~
## Contatos
- 👇🏼 [[email protected]]
[](https://www.youtube.com/channel/UCMvtn8HZ12Ud-sdkY5KzTog)
[](https://www.instagram.com/rafablum_/)
[](https://twitter.com/universoCode)
[](https://www.linkedin.com/in/rafael-blum-378656285/)
[](https://github.com/RafaelBlum)
Adoro me conectar com pessoas diferentes, então se você quiser dizer oi, ficarei feliz em conhecê-lo mais! :)