Começando com PHP - Formulário sem Refresh

Escrito por Matheus Rocha.

comecando com php formulario sem refresh

No mundo do Desenvolvimento Web, podemos notar uma divisão clara entre as a finalidade das linguagens envolvidas no desenvolvimento de um site. Você já deve ter escutado por aí, termos como Front-end ou Back-end. O Front-end representa o conjunto de rotinas responsáveis por serem processadas no "lado do cliente", sendo responsável pela maioria das características visuais e animações da aplicação. Até então, nada é requisitado ou escrito no servidor. Algumas tecnologias de Front-end são: Html, Css, javaScript, jQuery...

Quando exibimos informações em uma página da Web, além da apresentação estética, é necessário projetar quais, como, quando e onde as informações serão exibidas.
PHP é uma linguagem de programação que roda do "lado do servidor", permitindo criar interação com o usuário através de informações enviadas por formulários e por parâmetros através da URL, por exemplo. Nenhum código responsável por este processamento é mostrado, mas sim, a resposta da solicitação realizada ao servidor. Exemplos de tecnologias de Back-end: Java Web, Asp, Php, Python...

Ao acessar um Site, o usuário solicita uma resposta ao servidor, que responde com a cópia da página solicitada, em HTML. A resposta é interpretada pelo navegador e a página é renderizada. É possível visualizar o código HTML, javaScript e CSS retornados pelo servidor. Clique com o botão direito em cima do elemento->inspecionar elemento e a ferramenta será exibido e o objeto, selecionado; Ou aperte f12 para abrir o inspecionador sem a seleção.

O objetivo deste artigo é ambientar pessoas que estejam iniciando seus estudos em Desenvolvimento Web, fornecendo uma visão-geral de todas as áreas que compõem o processo de desenvolvimento de um Website. Aqui, o foco é o Back-end. Até o momento, presumo que você já tenha um Webserver local instalado e configurado. Caso tenha caído aqui de “pára-quedas”, aqui tem um artigo com algumas dicas práticas o início de seus estudos.

 

A importância dos algoritmos

É uma habilidade fundamental para quem deseja aprender alguma linguagem de programação, qualquer que seja. Algoritmo é o nome dado ao estudo e também aplicação de sequências-lógicas. É possível parar e refletir para rapidamente chegar à conclusão de que vivemos o Algoritmo em nossas vidas. Para ilustrar, vamos simular uma sequência de passos para um usuário que deseja pegar suas chaves em uma determinada gaveta. Temos:

Abrir a gaveta
Se
chave = encontrada
Pegar

Se não
Abrir outra gaveta


Podemos deixar nosso exemplo ainda mais incrementado usando recursividade. Ficaria mais ou menos assim:


(Abrir a gaveta)
Se
chave = encontrada
Pegar


Se não
(Abrir a gaveta)


(Abrir gaveta) será chamada, caso a chave seja encontrada, ele pega e sai da rotina. Caso não seja encontrada, ela executa outra instância de si mesma para novamente procurar a chave em OUTRA gaveta, que não a anterior.

Note que as decisões são tomadas na medida que o “programa” ou no caso, a vida, requer. Organize seu tempo e estude Algoritmos, você deve estar sempre afiado nesta competência. Após um tempo, você pensará naturalmente de forma mais organizada durante a construção de seus programas - e também fora deles.

 


Enfim, PHP na prática


Existem diversas funcionalidades que compõem essa versátil e poderosa linguagem. Ela nos permite o controle total dos dados de forma relativamente fácil.

Existem diversos tipos de validação de formulário, tanto à nível de Front-end quanto Back-end. As máscaras javaScript e jQuery auxiliam no trabalho de validar os dados no Front. No Back, também precisamos verificar essas informações, mas avancemos com calma.

Vamos utilizar em nosso exemplo um formulário simples para envio de subscrição de Newsletter. Os campos serão: Nome, Endereço de e-mail e Estado. Ao clicar em “Enviar”, verificaremos se os dois campos de texto foram preenchidos e o Select referente ao estado, devidamente selecionado.

 

form exemplo php

Link de demonstração do exemplo em operação

Download dos arquivos

 

Os arquivos de Front-end; O html e css se encontram disponíveis para download aqui. É só baixar e extrair na pasta raíz de seu Webserver. Se você ainda não possui um Webserver instalado, recomendo o Xampp. Ele dá suporte ao mySql que é o banco de dados “base” para o desenvolvimento Web, entre outras coisas. A maioria dos recursos básicos já vem pré-configurados, mas de hoje em diante você é autodidata e eu sei que encontrará um tutorial na internet para deixar tudo no jeito

A forma convencional é: inserir na tag form o atributo action=”minhapagina.php” causando assim, ao clicar no botão, uma requisição a outra página, e acontece o Reload. Reload é o efeito de carregar ou recarregar a página. Aqui, faremos um formulário com essa requisição implícita, fazendo com que o usuário não mude de página para obter uma resposta do servidor. Essa pequena diferença, causa grandes melhoras no que chamamos de UX (User experience) estudo que analisa o comportamento do usuário exposto à determinada interface. Através de boas práticas conseguimos maximizar a chance de um potencial cliente, por exemplo, vir a comprar o produto que é anunciamos ou vendemos no site.

 

Em nosso arquivo processa.php temos:

  1. <php
  2. $nome = $_POST["nome"];
  3. $email = $_POST["email"];
  4. $uf = $_POST["uf"];
  5. ?>

 

O código PHP deve estar escrito dentro das tags <?php e ?>. O que estiver de fora, será retornado automaticamente como HTML. O caractere $ indica a declaração de uma variável. Aqui estamos atribuindo o valor às variáveis $nome, $email e $uf através do método POST e utilizando seus respectivos nomes para referenciar o valor. O atributo name=”nomedoelemento” da tag <input> é quem determina o nome do atributo a ser recuperado aqui.

 

  1. Nome: <?php echo $nome." //"; ?>
  2. E-mail: <?php echo $email." //"; ?>
  3. Estado: <?php echo $uf; ?>

 

Exibimos o resultado enviado através do formulário, concatenando os caracteres “//” para melhorar a visualização dos resultados.

 

Mágica? Não. Conhecimento!

Os grandes responsáveis pelo efeito “sem Reload” são:

 

A linha do arquivo index.html:

  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Incorpora o arquivo-fonte jQuery min do CDN Google

 

O trecho de código dentro da tag <head> do index.html:

  1. <script>
  2. $(document).ready(function(){
  3. jQuery('#meuForm').submit(function(){
  4. ...
  5. </script>

Chama função responsável pela requisição à página que irá recuperar os dados enviados. #meuForm deverá corresponder ao atributo id=”meuid” da tag <form>

 

 

 

 

E aí, conseguiu? Diga-nos o que achou deste artigo, curta e compartilhe para nos ajudar a continuar produzindo conteúdo gratuito e de qualidade. Até a próxima!

 

Tags: Hypertext Preprocessor