Calculadora-livewire: A PHP repository from RafaelBlum

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.)

Desenvolvimento (lógica)

View blade *calculator*

<input type="text" class="values" wire:model="tot" disabled="">
<input type="text" class="values" value="{{$math}}" placeholder="0">

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.

<div class="first-row">
    <input type="button" name="" wire:click="addMath('^')" value="&radic;" class="global">
    <input type="button" name="" wire:click="addMath('(')" value="(" class="global">
    <input type="button" name="" wire:click="addMath(')')" value=")" class="global">
    <input type="button" name="" wire:click="addMath('%')" value="%" class="global">
</div>
<div class="second-row">
    <input type="button" name="" wire:click="addMath(7)" value="7" class="global">
    <input type="button" name="" wire:click="addMath(8)" value="8" class="global">
    <input type="button" name="" wire:click="addMath(9)" value="9" class="global">
    <input type="button"         wire:click="addMath('/')" name="" value="/" class="global">
</div>
<div class="third-row">
    <input type="button" name="" wire:click="addMath(4)" value="4" class="global">
    <input type="button" name="" wire:click="addMath(5)" value="5" class="global">
    <input type="button" name="" wire:click="addMath(6)" value="6" class="global">
    <input type="button" name="" wire:click="addMath('*')" value="X" class="global">
</div>
<div class="fourth-row">
    <input type="button" name="" wire:click="addMath(1)" value="1" class="global">
    <input type="button" name="" wire:click="addMath(2)" value="2" class="global">
    <input type="button" name="" wire:click="addMath(3)" value="3" class="global">
    <input type="button" name="" wire:click="addMath('-')" value="-" class="global">
</div>
<div class="conflict">
    <div class="left">
        <input type="button" name="" wire:click="addMath(0)" value="0" class="big global">
        <input type="button" name="" wire:click="addMath('.')" value="." class="small global">
        <input type="button" name="" wire:click="clear" value="Del" class="global red small white-text top-margin">
        <input type="button" name="" wire:click="addMath('+')" value="+" class="global grey plus">
    </div>
    <div class="right">
        <input type="button" name="" wire:click="result" value="=" class="global green white-text big top-margin result" >
    </div>
</div>

Controller *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.

{{$description}}
<input type="text" class="values" wire:model="description">

Exemplos 2

Componente de botão com reatividade de somar e diminuir. wire:click acessa o metodo no controller do componente.

{{$number}} <br>
<button type="button" class="values" wire:click="addPlus">Somar</button>
<button type="button" class="values" wire:click="addMinus">Subtrair</button>

    public function addPlus()
    {
        $this->number++;
    }
    
    public function addMinus()
    {
        $this->number--;
    }

Contatos

👇🏼 [rafaelblum_digital@hotmail.com]

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

RafaelBlum/Calculadora-livewire