Criando um formulário para entrada de dados de produtos com php e html

Este artigo orienta o estudante na elaboração de um formulário de entrada de dados usando métodos de programação...

por Douglas de Oliveira Tybel

RESUMO:

Este artigo orienta o estudante na elaboração de um formulário de entrada de dados usando métodos de programação em linguagem PHP e HTML, procurando estabelecer, de forma sintética, os principais pontos para o desenvolvimento de classes e telas. Neste sentido, descreve-se seqüencialmente, os sucessivos passos para a construção de um formulário de cadastro completo, porem simples.

PALAVRAS-CHAVE: Classe. Objeto. PHP. HTML. Produtos. Cadastro. Formulário. Entrada de dados

INTRODUÇÃO

Para os iniciantes em PHP, este artigo deve fazer parte do seu material de trabalho, pois se trata de como desenvolver um formulário para entrada de dados com PHP e HTML trabalhando juntos.

O formulário será o local onde o usuário digitará os dados que deseja salvar no banco de dados, desta forma o designer deve ser o mais intuitivo possível. No nosso exemplo usaremos como banco de dados o MYSQL e como servidor WEB o Apache, pois ambos são gratuitos.

Na internet existem algumas ferramentas que nos auxiliam neste processo de configuração de servidores WEB e banco de dados. Nós usaremos o XAMPP para economizar esforços em configurações de servidores. Lembrando que após instalá-lo, será necessário deixar iniciado o Apache e o MYSQL no momento dos testes.

Use algum editor de pagina como o FrontPage para poder criar uma pagina de entrada de dados para o cadastro de produtos. Para desenhar siga os passos conforme as telas abaixo:

Estrutura de pasta dentro do c:\xampp\htdocs\exercicio1

Estrutura de pasta para arquivos classe: c:\xampp\htdocs\exercicio1\class

O que é um formulário?

Um formulário em um site é semelhante em conceito a um formulário em papel, exceto se você o cria online e o usa para interagir e reunir informações de visitantes do site.

Geralmente, os visitantes do site inserem informações (também conhecidas como "valores") em campos de formulário e indicam suas preferências clicando em botões de opção, caixas de seleção e caixas suspensas. Os visitantes do site também podem digitar comentários em caixas de texto ou áreas de texto.

Ao abrir o FrontPage, uma pagina em branco será aberta com o nome de nova_pagina_1.htm. Vamos inserir um formulário nesta pagina. Acesse o menu Inserir>>Formulário>>Formulário

Figura 1

Será inserida uma área demarcada com dois botões, conforme imagem abaixo:

Figura 2

Posicione o cursor no início do botão <Submeter> e então, pressione a tecla <Enter> algumas vezes para que um espaço seja liberado.

Figura 3

Vamos configurar o formulário inserido, para isso, pressione o botão direito do mouse em uma área em branco dentro do formulário e escolha a opção “Propriedade do formulário...”

Figura 4

Na tela de Propriedade do formulário marque a opção “Enviar para outro” e no nome do formulário digite: form1 então clique no botão “Opções...”

Figura 5

Abrirá a tela para inserirmos as configurações do formulário, preencha o campo Ação: produto.php e clique em OK

Figura 6

Retorne para a tela principal, repare que os códigos foram alterados de acordo com a configuração realizada.

Figura 7

Clique com o botão direito do mouse sobre o botão <Submeter> e clique em “Propriedades do campo de formulário”

Figura 8

Altere o “Valor/rótulo:” para Cadastrar

Figura 9

Insira na área em branco do formulário uma tabela 2x2.

Figura 10

Preencha a tabela com a primeira linha da primeira coluna “Código Barra” e a segunda linha da primeira coluna com “Produto”, conforme imagem abaixo:

Figura 11

Para cada elemento que queira no formulário, posicione o cursor dentro deste, escolha no menu Inserir a opção Formulário, e escolha, do menu resultante, o tipo de elemento a inserir, neste caso “Caixa de Texto” em frente aos campos correspondentes.

Figura 12

Como resultado uma “Caixa de Texto” será inserida no formulário dentro da tabela.

Figura 13

Insira mais uma caixa de texto na lacuna do Produto.

Figura 14

Como resultado ficará uma caixa de texto para cada linha, conforme abaixo:

Figura 15

Precisamos configurar os nomes das caixas de texto para que reconheçamos como variáveis no PHP. Assumiremos os nomes conforme a tabela de produtos (codigo_barra,produto).

Clique com o botão direito do mouse sobre a primeira caixa de texto e escolha “Propriedades do campo de formulário”

Figura 16

Na tela de propriedade da caixa de texto defina o nome da primeira caixa como codigo_barra e pressione OK.

Figura 17

Faça o mesmo para a segunda caixa de texto.

Figura 18

Desta vez defina o nome como produto e clique em OK.

Figura 19

Salve o arquivo atual, clique no menu arquivo >> Salvar.

Figura 20

Escolha o diretório htdocs no caso de usarmos o xampp como servidor de pagina. Crie uma pasta chamada exercicio1 dentro de htdocs

Figura 21

Defina o nome da pasta como exercicio1

Figura 22

No nome do arquivo digite: produto.htm e clique em Salvar.

Figura 23

O que é XAMPP ?

XAMPP é um servidor independente de plataforma, software livre, que consiste principalmente na base de dados MySQL, o servidor web Apache e os interpretadores para linguagens de script: PHP e Perl. O nome provem da abreviação de X (para qualquer dos diferentes sistemas operativos), Apache, MySQL, PHP, Perl.

Verifique se o servidor Apache está ativo conforme tela abaixo e abra a tela de configuração do phpMyAdmin no botão Admin...

Figura 24

A pagina abaixo abrirá com a tela de do SGDB do mysql, conhecido com phpMyAdmin.

Figura 25

Na tela principal bem no centro, no título “Criar novo Banco de Dados” digite Estoque para que possamos criar um novo banco de dados e clique em “Criar”.

Figura 26

Em caso de sucesso, uma mensagem com fundo verde surgirá ou em caso de erros o erro será informado. Observe se o banco de dados já não existe.

Figura 27

Para criarmos uma nova tabela no banco de dados, na tela principal abaixo procure pelo rótulo “Criar nova tabela no Banco de Dados”. No campo Nome defina como produtos e no número de arquivos que é o mesmo que colunas escolha 3, então clique no botão executar.

Figura 28

Preencha a tela conforme abaixo:

cod_produto do tipo int marque o índice para PRIMARY.

codigo_barra do tipo varchar(13) marque a opção Nulo.

produto do tipo varchar(80) marque a opção Nulo.

Clique no botão SALVAR.

Figura 29

Como resultado será mostrado à mensagem em inglês que a tabela foi criada com sucesso!

Figura 30

Em algum editor PHP, como o NetBeans crie os arquivos conforme conteúdo respectivo abaixo:

conexao.class.php > save no diretório class da pasta exercicio1.

Produto.class.php > save no diretório class da pasta exercicio1.

produto.php > save no diretório exercicio1 antes da pasta class.

conexao.class.php

<?php   //Define o nome da classe a ser criada, no nosso caso Conexao   class Conexao   {         //Abaixo as respectivas variaveis para cada atributo de nossa classe           var $usuario                 = "root";           var $senha    = "";           var $hostname             = "localhost";           var $banco    = "estoque";           //Dois atributos extras, um para guardar o comando sql e outro para guardar o link conexao          var $link         = "";     //Definir método setConectar, tem a função de executar os códigos para conexao ao banco de dados     function setConectar()                 {                 //Faz a conexao com ao banco e armazena na variavel this->link                 $this->link = mysql_pconnect($this->hostname,$this->usuario,$this->senha) or die (mysql_error());         //Seleciona o banco a ser usado no mysql                                mysql_select_db($this->banco, $this->link);                 }   } ?>

Produto.class.php

<?php class Produto{     //include_once("conexao.class.php");     //declaracao de variaveis publicas e privadas     public $cod_produto;     public $codigo_barra;     public $produto;     // Metodo construtor setamos aqui o que queremos que ele faça ao criar o objeto     function __construct(){                 //inclue a classe conexao se não estiver incluida                 include_once("conexao.class.php");         //criamos a nossa conexao com o banco de dados e selecionamos o banco                     //Criar uma variavel para armazer a instancia(objeto) da classee conexao                                $oConexao = new Conexao();                                //Executar o metodo setConectar da classe Conexao                                $oConexao->setConectar();         echo "Conectado.<br>";     }     function setProduto(){         //realiza o insert no banco de dados passando os valores do objeto criado         $insertProdutos = mysql_query("insert into produtos values(NULL ,"$this->codigo_barra","$this->produto")");         echo "Inserido.<br>";     } } ?>

produto.php

<?php         include_once("class/Produto.class.php");         //Criando e Instanciando o objeto         $oProduto               = new Produto;         //Atribuindo valores ao objeto         $oProduto->codigo_barra = $_POST["codigo_barra"];         $oProduto->produto      = $_POST["produto"];         //chamando a funcao que faz o insert         $oProduto->setProduto();         echo "Produto ". $_POST["produto"] . " cadastrado com sucesso!"; ?>

Para efetuar o teste, acesse o link a seguir no browser: http://localhost/exercicio1/produto.htm

O formulário para entrada de dados de produtos será aberto, preencha-o com dados fictícios e clique no botão cadastrar

Acesse o banco de dados para verificar se foi incluído registro preenchido no formulário à tabela

CONCLUSÃO

Para realizar o cadastro de um produto, é necessário unir várias técnicas dispostas em diversas disciplinas distintas, assim como banco de dados, web designer, web máster, linguagem PHP, linguagem HTML, Classes, Objetos, Paradigma de Programação Orientada a Objeto. Para seguir na área de programação, o indivíduo deve ter interesse por várias áreas de conhecimento no seguimento, pois para realizar um simples cadastro de produtos, unirmos várias tecnologias. Para listar os produtos já cadastrados, é necessário criar mais um método na classe Produtos, isso poderá ser visto no próximo artigo.

REFERÊNCIAS

Melo, Ana Cristina. Desenvolvendo Aplicações com UML, 1 º Edição, Brasport, 2002.

Melo, Ana Cristina. Desenvolvimento aplicações com UML 2.0: do conceitual à implementação / Ana Cristina Melo. – 2. Ed. – Rio de Janeiro : Brasport, 2004.