Interação HTML - PHP

Algo que incomoda um pouco quem está começando com PHP é porque não há uma forma de enviar dado apenas através da linguagem e para trocar o dado tem que toda hora está mudando-o no algoritmo, mas existe uma forma de enviar dado através da interação entre o HTML e PHP. O HTML até o presente momento desta postagem, não foi falado, mas mesmo assim estarei explicando como fazer essa interação.

Para isso iremos implementar um algoritmo simples de fatorial sem recursão para facilitar o entendimento de todo mundo.

Primeiro vamos iniciar criando um pequeno formulário que possui uma caixa de texto e um botão apenas. Esse caixa de texto será a parte onde iremos informar o número a qual queremos fazer o fatorial e o botão irá servir apenas para a submissão do formulário para que se inicie o calculo do determinado número que colocar lá.

A primeira coisa deveremos fazer é criar a estrutura base do HTML, nela reside o HEAD e o BODY, respectivamente a CABEÇA e CORPO do HTML.

No HEAD irá toda parte do HTML que não será "visualizada" pelo usuário, são apenas configurações da página, algo que estarei demostrando.

Então a estrutura base ficara desta forma:

Uma dica é que sempre que abrir uma TAG a feche logo para que não esqueça depois.

Após a criação dessa estrutura, vamos colocar um titulo na pagina, para isso iremos colocar a tag TITLE no HEAD, lembrando de abrir e fechar sempre a tag, nesse caso especifico você já pode esta colocando entre a abertura e o fechamento da tag o titulo que você deseja para a pagina e ele ficará da seguinte forma:

Após fazer isso salve o arquivo com o nome a qual deseja, mas a extensão do arquivo deverá ser ".PHP" isso porque iremos executar um código PHP junto com o HTML. Após salvar o arquivo coloque-o na pasta do servidor web da sua maquina e abra-o no localhost.

Após esse procedimento você poderá observar que no titulo da aba da página, terá o titulo a qual colocou, caso tenha colocado o mesmo titulo que eu irá observar que o titulo estará com caracteres estranhos na palavra INTERAÇÃO. Para resolver isso você terá que usar a tag META que fara a correção desse problema.

O que o UTF-8 faz é acrescentar todos os caracteres que utilizamos na língua portuguesa, isso faz com que corrija esses eventuais erros. Após colocar essa tag, salve o arquivo e atualize a página do seu arquivo e verá que esse erro estará corrigido.

Após isso vamos da inicio a criação do formulário e para isso iremos iniciar abrindo a tag FORM, essa tag vai receber dois parâmetros que são o ACTION que serve para dizer para onde deve ser enviado os dados colhidos pelo formulário e METHOD é a forma de enviar os dados. 

No ACTION como iremos utilizar os dados no mesmo arquivo, ele vai receber uma cerquilha (#) que indica que não vamos movimentar o dado para nenhum outro arquivo. Já o METHOD ele pode receber tanto o método de envio POST quanto GET, você pode está utilizando um de cada vez para ver o envio, a diferença deles dois é que o GET possui o envio pela barra de endereço do navegador, já o POST não, o que torna o método POST mais seguro que o GET para envio.

Agora vamos abrir a tag LABEL que seria um titulo para do que se trata o que vem a seguir, no nosso caso iremos colocar: "VALOR PARA FATORAÇÂO: ". Ele irá preceder a caixa de texto que receberá o número para a fatoração.

Após isso iremos criar a caixa de texto para poder pegar o valor que será digitado pelo usuário, para isso iremos abrir a tag INPUT que recebera como parâmetro um NAME(nome) e um TYPE(tipo).

O nome será a forma de identificarmos para qual variável de qual campo de texto que estamos pegando o valor que será atribuído a ela e o tipo será a entrada, onde ele pode ser TEXT, NUMBER, PASSWORD e etc. Nesse caso você pode esta usando tanto o TEXT quando NUMBER, já que iremos trabalhar com números.

E por ultimo antes de fechar a tag form, iremos adicionar um botão para podemos submeter o dado. Para isso iremos adicionar uma tag chamada BUTTON que terá um nome e um tipo também, o nome você pode esta colocando qualquer um, já o tipo será SUBMIT, que é para que o botão irá servir que é submeter o valor, enviando ele para o algoritmo PHP. entre a tag de abertura e fechamento, você pode esta colocando um nome que será o que terá escrito no botão. 

E o código HTML com todas essas funcionalidades ficará da seguinte forma:

Com isso a parte do HTML está finalizada, você pode está salvando e atualizando o navegador para está visualizando o formulário.

Agora vamos da inicio a parte PHP que sera o processamento, onde haverá o calculo do fatorial do número informado.

Para isso iremos logo após o fechamento da tag FORM iremos abrir a tag do PHP e fechar logo em seguida. Desta forma:

<?php  

 ?>

Após isso podemos começar em si nosso código PHP. De inicio vamos declarar duas variáveis, uma variável que irá receber o número do formulário e uma que irá armazenar o resultado. Vamos declarar a variável que receberá o número com o nome $num e a que receberá o resultado com o nome $resultado. Ficará assim:

$num = $_POST['valor1'];
$resultado = 1;

O que fizemos foi iniciar a variável $resultado com o 1(um) para que ela tenha um valor armazenado que multiplicado com qualquer outro número o resultado é o outro número, diferente de 0(zero) que multiplicado por qualquer outro, o resultado é ele mesmo.

Já o $num ele vai receber o número do formulário, para isso precisamos dizer qual o método que ele irá receber esse valor, como dizemos na declaração do formulário que o método de envio é POST, logo ele irá receber um valor pelo $_POST, caso o método de envio fosse GET ele receberia o valor pelo método $_GET. E entre coxetes esta o nome de qual campo do formulário a gente esta recebendo o valor, como colocamos o nome do campo de texto como "VALOR1" dentro do coxete ele recebe o nome do campo. OBS: o nome do campo tem que estar entre aspas simples.

Agora iremos para a parte do calculo, para isso iremos utilizar de uma estrutura de repetição para as varias multiplicações seguidas, nesse caso iremos utilizar o FOR.

A estrutura ficara assim:

for ($i = 1; $i <= $num; $i++) { 
    $resultado *=$i;
}

Aqui vamos iniciar a multiplicação a partir do 1, assumindo que $num possui valor 5(cinco) o $i vai somando 1 até que ele seja igual a 5 e pare o LOOP, e a variável $resultado irá multiplicar o valor que possui armazenado nela com o valor de $i no momento e vai armazenando o valor dessa multiplicação em si mesma para multiplicar esse resultado com o próximo valor de 1. Isso funciona utilizando esse operador (*=).

Esse LOOP funcionará da seguinte forma:

1*1 = 1
1*2 = 2
2*3 = 6
6*4 = 24
24*5 = 120

Por fim só precisamos colocar para imprimir o resultado que ficará da seguinte forma:

echo "Resultado: $resultado";

O código completo ficará da seguinte forma:

Salve o código e atualize-o no navegador, de inicio ele irá apresentar o erro pelo o código PHP esta na mesma pagina que o HTML e por não reconhecer $_POST['valor1']. Isso porque o formulário não ter sido submetido ainda, mas no momento em que você submeter o formulário ele irá funcionar corretamente.

O erro será este:

O erro fala que esta indefinido o "valor1" no algoritmo PHP, mas como disse, isso acontece por não ter submetido o formulário ainda, caso colocar um número na caixa de texto e clicar em enviar, ele irá funcionar corretamente.

E aqui finalizamos a parte de Interação HTML - PHP. Todos os códigos PHP postados aqui, vocês podem coloca-los no seu servidor web e está executando para ver como será o retorno dos resultados. Continuem ligados no TURIMLAB para mais posts sobre PHP e tudo sobre tecnologia.

Dicas, sugestões e dúvidas podem colocar nos comentários!