Implementando scripts PHP com MySQL
Neste artigo explico como manipular o banco de dados MySQL com PHP, criando páginas para cadastro, edição e listagem dos registros armazenados.
Parte 7: Criando os HTMLs de interação com o usuário
Agora vamos criar as páginas que serão o front-end do usuário para a manipulação das
informações no banco de dados. Estou partindo do princípio que você conhece as tags de HTML
e o uso de formulários.
1° Html - Aqui vamos fazer a tela de cadastro de funcionários.
1° Html - Aqui vamos fazer a tela de cadastro de funcionários.
<!-- cadastrar.html -->
<html>
<title>Cadastrando de Funcionário</title>
<body>
<b>CADASTRO DE FUNCIONÁRIO</b>
<p align="justify">Preencha os campos abaixo:
<br>
<form name="formCadastrarFuncionario" method="post" action="enviardados.php">
<table>
<tr>
<td width=20%>Nome:</td>
<td width=80%> <input type="text" name="nome" size="40"></td>
</tr>
<tr>
<td>Cargo:</td>
<td><input type="text" name="cargo" size="30"></td>
</tr>
<tr>
<td>Setor:</td>
<td><input type="text" name="setor" size="30"></td>
</tr>
</table>
<br><br>
<input type="submit" value="Cadastrar">
<input type="reset" value="Limpar">
</form>
</body>
</html>
<html>
<title>Cadastrando de Funcionário</title>
<body>
<b>CADASTRO DE FUNCIONÁRIO</b>
<p align="justify">Preencha os campos abaixo:
<br>
<form name="formCadastrarFuncionario" method="post" action="enviardados.php">
<table>
<tr>
<td width=20%>Nome:</td>
<td width=80%> <input type="text" name="nome" size="40"></td>
</tr>
<tr>
<td>Cargo:</td>
<td><input type="text" name="cargo" size="30"></td>
</tr>
<tr>
<td>Setor:</td>
<td><input type="text" name="setor" size="30"></td>
</tr>
</table>
<br><br>
<input type="submit" value="Cadastrar">
<input type="reset" value="Limpar">
</form>
</body>
</html>
NOTA: O comando "action" dentro da tag do formulário irá fazer a chamada ao script PHP.
O comando "name" dentro da tag <input> deve ter seu nome igual a variável do script PHP que receberá esta informação.
2° Html - Aqui vamos fazer a tela de busca por um funcionário.
<!-- buscar.html -->
<html>
<title>Buscar Funcionário para Editar seus Dados</title>
<body>
<b>BUSCAR FUNCIONÁRIO</b>
<p align="justify">Entre com o nome do funcionário:
<br>
<form name="formBuscarFuncionário" method="post" action="obterdados.php">
<table>
<tr>
<td width=20%> Nome:</td>
<td width=80%> <input type="text" name="buscar" size="40"</td>
</tr>
</table>
<br><br>
<input type="submit" value="Buscar">
<input type="reset" value="Limpar">
</form>
</body>
</html>
<html>
<title>Buscar Funcionário para Editar seus Dados</title>
<body>
<b>BUSCAR FUNCIONÁRIO</b>
<p align="justify">Entre com o nome do funcionário:
<br>
<form name="formBuscarFuncionário" method="post" action="obterdados.php">
<table>
<tr>
<td width=20%> Nome:</td>
<td width=80%> <input type="text" name="buscar" size="40"</td>
</tr>
</table>
<br><br>
<input type="submit" value="Buscar">
<input type="reset" value="Limpar">
</form>
</body>
</html>
3° Html - Aqui vamos fazer a tela para editar os dados do funcionário.
<!-- editar.html -->
<html>
<title>Editando dados do Funcionário</title>
<body>
<b>EDITANDO DADOS</b>
<p align="justify">Altere os dados abaixo que achar necessário:
<br>
<form name="formEditarDados" method="post" action="editardados.php">
<table>
<tr>
<td width=20%>Código:</td>
<td width=80%><input type="hidden" name="codigo" value="<? echo $codigo ?>" size="5"></td>
</tr>
<tr>
<td width=20%>Nome:</td>
<td width=80%><input type="text" name="nome" value="<? echo $nome ?>" size="40"></td>
</tr>
<tr>
<td>Cargo:</td>
<td><input type="text" name="cargo" value="<? echo $cargo ?>" size="30"></td>
</tr>
<tr>
<td>Setor:</td>
<td><input type="text" name="setor" value="<? echo $setor ?>" size="30"></td>
</tr>
</table>
<br><br>
<input type="submit" value="Editar">
<input type="reset" value="Limpar">
</form>
</body>
</html>
<html>
<title>Editando dados do Funcionário</title>
<body>
<b>EDITANDO DADOS</b>
<p align="justify">Altere os dados abaixo que achar necessário:
<br>
<form name="formEditarDados" method="post" action="editardados.php">
<table>
<tr>
<td width=20%>Código:</td>
<td width=80%><input type="hidden" name="codigo" value="<? echo $codigo ?>" size="5"></td>
</tr>
<tr>
<td width=20%>Nome:</td>
<td width=80%><input type="text" name="nome" value="<? echo $nome ?>" size="40"></td>
</tr>
<tr>
<td>Cargo:</td>
<td><input type="text" name="cargo" value="<? echo $cargo ?>" size="30"></td>
</tr>
<tr>
<td>Setor:</td>
<td><input type="text" name="setor" value="<? echo $setor ?>" size="30"></td>
</tr>
</table>
<br><br>
<input type="submit" value="Editar">
<input type="reset" value="Limpar">
</form>
</body>
</html>
NOTA: Lembre-se que este HTML será chamado ao final do script "obterdados.php", que repassará as informações que preencherão os campos do formulário através das variáveis $codigo, $nome, $cargo, $setor, chamadas a partir da tag do PHP <? echo $nome_variável ?>.
4° Html - Aqui vamos fazer a tela que será nossa página inicial.
<!-- inicio.html -->
<html>
<title>Página Inicial</title>
<body>
<b>Escolha a tarefa a ser executada:</b>
<p align='center'><a href='cadastrar.html'>Cadastrar Funcionário</a>
<p align='center'><a href='buscar.html'>Editar Funcionário</a>
<p align='center'><a href='listar.php'>Visualizar Registros de Funcionários</a>
</body>
</html>
<html>
<title>Página Inicial</title>
<body>
<b>Escolha a tarefa a ser executada:</b>
<p align='center'><a href='cadastrar.html'>Cadastrar Funcionário</a>
<p align='center'><a href='buscar.html'>Editar Funcionário</a>
<p align='center'><a href='listar.php'>Visualizar Registros de Funcionários</a>
</body>
</html>
Comentário: Show de bola né... agora você já pode brincar com os scripts e os formulários para o cadastro dos funcionários.
As vezes comecamos a viajar em assuntos de nivel técnico relativamente alto e nos esquecemos que o pessoal que tá comecando só quer e precisa de exemplos simples.
[]`s
Ragen