Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: about 1 month 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.

Awesome Lists containing this project

README

        

Laravel Logo



calculadora com livewire


version project
stack project
stack project
stack project

GPLv3 License

## _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}}

~~~~~~



calculadora com livewire

##### 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--;
}
~~~~~~



calculadora com livewire

## Contatos

- 👇🏼 [[email protected]]

[![Youtube Badge](https://img.shields.io/badge/-Youtube-FF0000?style=flat-square&labelColor=FF0000&logo=youtube&logoColor=white&link=https://www.youtube.com/channel/UCMvtn8HZ12Ud-sdkY5KzTog)](https://www.youtube.com/channel/UCMvtn8HZ12Ud-sdkY5KzTog)
[![Instagram Badge](https://img.shields.io/badge/-rafablum_-violet?style=flat-square&logo=Instagram&logoColor=white&link=https://www.instagram.com/rafablum_/)](https://www.instagram.com/rafablum_/)
[![Twitter: universoCode](https://img.shields.io/twitter/follow/universoCode?style=social)](https://twitter.com/universoCode)
[![Linkedin: RafaelBlum](https://img.shields.io/badge/-RafaelBlum-blue?style=flat-square&logo=Linkedin&logoColor=white&link=https://www.linkedin.com/in/rafael-blum-378656285/)](https://www.linkedin.com/in/rafael-blum-378656285/)
[![GitHub RafaelBlum](https://img.shields.io/github/followers/RafaelBlum?label=follow&style=social)](https://github.com/RafaelBlum)


Adoro me conectar com pessoas diferentes, então se você quiser dizer oi, ficarei feliz em conhecê-lo mais! :)