logo

Exercicio PHP – Formulários HTML e conexão com banco de dados

Para esta aula voce precisará:

1) De um servidor de páginas instalado em seu computador (eu sugiro utilizar o que está disponível aqui em meu site, na seção “conteudo para download”) – Procure por: Wampserver

2) Instalae este programa, execute-o e “suba”(inicie) o serviço de webserver

3) Dentro da pasta onde o programa foi instalado, existe uma pasta chamada WWW, dentro dela crie uma pasta chamada “AULA”

Deste ponto em diante, todos os arquivos desta aula DEVERÃO SER SALVOS dentro da pasta citada acima, com os nomes que eu sugerir no decorrer deste exercício.

Nesta aula, nosso objetivo é criar um formulário, onde serão inseridas informações dentro de um banco de dados MySql, sendo possível executar consultas SQL logo em seguida, utilizando um simples formulário HTML.

Assim, também iremos criar uma página onde será possível configurar uma consulta a ser feita ao nosso banco de dados, onde irão aparecer alguns dados, caso eles atendam aos critérios de pesquisa estabelecidos pelo usuário.

PASSO 1) Criar a pagina de entrada de nosso “site”

Para isto, abra o notepad e, dentro dele, coloque as seguintes linhas de código:

<html>
<head>
<title>AULA DE REVISAO – PRONATEC</title>
</head>
<body>
<p align=”center”><img src=”http://localhost/aula/imagens/pronatec.jpg”/></p>
<a href=”http://localhost/aula/inserir-pedidos.php” target=”_blank”>Inserir pedidos</a>
<br>
<br>
<a href=”http://localhost/aula/consultar-pedidos.php” target=”_blank”>Consultar pedidos</a>
<br>
<br>
</body>
<html>

Agora, salve o arquivo dentro da pasta “aula” com o nome de “index.html”


PASSO 2) Criar a pagina com o formulário de inserção de dados de nosso “site”

Para isto, abra o notepad e, dentro dele, coloque as seguintes linhas de código:

<html>
<head>
<title>AULA DA TURMA DA FACULDADE</title>
</head>
<body>

<form action=”inserir.php” method=”post”>
<input type=”hidden” name=”produtopedido_cod”>
nome do produto:<br>
<input type=”text” name=”produtopedido_nome”><br>
quantidade: <br>
<input type=”text” name=”produtopedido_quantidade”><br>
<input type=”submit” value=”Concluir pedido”>
<input type=”reset” value=”Limpar campos”>
</form>

</body>
<html>

Agora, salve o arquivo dentro da pasta “aula” com o nome de “inserir-pedidos.php”


PASSO 3) Criar a pagina de script que irá processar os dados do form de inserção e adicioná-los ao banco de dados MySql de nosso “site”

Para isto, abra o notepad e, dentro dele, coloque as seguintes linhas de código:

<html>
<head>
<title>PAGINA DE CONCLUSAO DA INSERÇÃO</title>
</head>
<body>
<?php
$con=mysqli_connect(“localhost”,”root”,””,”db_loja”);
// Check connection
if (mysqli_connect_errno()) {
echo “Codigo da falha ao conectar ao MySQL: ” . mysqli_connect_error();
}

// codigo contra sql injection
http://localhost/aula/
$produtopedido_nome = mysqli_real_escape_string($con, $_POST[‘produtopedido_nome’]);
$produtopedido_quantidade = mysqli_real_escape_string($con, $_POST[‘produtopedido_quantidade’]);

$sql=”INSERT INTO tb_pedidos (produtopedido_cod, produtopedido_nome, produtopedido_quantidade)
VALUES (‘$produtopedido_cod’, ‘$produtopedido_nome’, ‘$produtopedido_quantidade’)”;

if (!mysqli_query($con,$sql)) {
die(‘Tipo de erro: ‘ . mysqli_error($con));
}
echo “1 registro adicionado”;

mysqli_close($con);
?>

</body>
<html>

Agora, salve o arquivo dentro da pasta “aula” com o nome de “inserir.php”


PASSO 4) Criar a pagina de formulário de pesquisa ao banco de dados MySql de nosso “site”

Para isto, abra o notepad e, dentro dele, coloque as seguintes linhas de código:

<html>
<head>
<title>PAGINA DE CONSULTA DA FACULDADE</title>
</head>
<body>

<p align=”center”><strong><i><font style=”color:BLUE” size=”16″> PAGINA DE CONSULTA</font></i></strong></p>

<form action=”consultar.php” method=”post”>
<strong><i><font style=”color:red”> NOME DO PRODUTO A CONSULTAR:</font></i></strong>
<br>
<br>
<input type=”text” name=”produtopesquisado_nome”>
<br>
<br>
<strong><i><font style=”color:red”>ORGANIZAR PEDIDOS POR:</font></i></strong>
<br>
<br>
<input type=”radio” name=”grp_ordenacao” value=”produtopedido_cod”>Codigo do pedido
<br>
<br>
<input type=”radio” name=”grp_ordenacao” value=”produtopedido_nome”>Nome do produto pedido
<br>
<br>
<input type=”radio” name=”grp_ordenacao” value=”produtopedido_quantidade”>Quantidade pedida
<br>
<br>
<strong><i><font style=”color:red”>ORGANIZAR EM ORDEM:</font></i></strong>
<br>
<br>
<input type=”radio” name=”grp_tipo” value=”asc”>Crescente
<br>
<br>
<input type=”radio” name=”grp_tipo” value=”desc”>Decrescente
<br>
<br>
<input type=”submit” value=”Consultar”>
<input type=”reset” value=”Zerar criterios”>
</form>

</body>
<html>

Agora, salve o arquivo dentro da pasta “aula” com o nome de “consultar-pedidos.php”


PASSO 5) Criar a pagina de script que irá processar os dados do form de consulta e adicioná-los ao banco de dados MySql de nosso “site”

Para isto, abra o notepad e, dentro dele, coloque as seguintes linhas de código:

 <html>

<head>
<title>Resultado da pesquisa</title>
</head>
<body>
<?php

$con=mysqli_connect(“localhost”,”root”,””,”db_loja”);
// Codigo para checar a conexao
if (mysqli_connect_errno()) {
echo “Falha ao conectar ao MySQL: ” . mysqli_connect_error();
}

$produtopesquisado_nome = mysqli_real_escape_string($con, $_POST[‘produtopesquisado_nome’]);
$ordenacao = mysqli_real_escape_string($con, $_POST[‘grp_ordenacao’]);
$tipo = mysqli_real_escape_string($con, $_POST[‘grp_tipo’]);

$result = mysqli_query($con,”SELECT * FROM tb_pedidos where produtopedido_nome like ‘%$produtopesquisado_nome%’ order by $ordenacao $tipo”);

while($row = mysqli_fetch_array($result)) {
echo $row[‘produtopedido_cod’] . ” ” . $row[‘produtopedido_nome’] . ” ” . $row[‘produtopedido_quantidade’];
echo “<br>”;
}

mysqli_close($con);

?>

</body>
<html>

Agora, salve o arquivo dentro da pasta “aula” com o nome de “consultar.php”


 

Nesta aula, voce viu:

1) Como criar formulários em HTML

2) Como conectar em um banco de dados MySql utilizando código PHP

3) Como pegar variáveis de um formulário HTML, repassar ao PHP para que sejam inseridos ou consultados dados dentro de um banco de dados MySql

 

Agora veja abaixo outros tipos de Objetos HTML e faça seus próprios testes:

TIPO DE OBJETO: Radiobox

<input type=”radio” name=”grp_sexo” value=”sexo-nao-escolhido” checked> escolha o sexo<br>
<input type=”radio” name=”grp_sexo” value=”masculino” checked> Masculino<br>
<input type=”radio” name=”grp_sexo” value=”feminino”> Feminino
<br>
<br>
<input type=”radio” name=”grp_cor” value=”Cor-nao-escolhida” checked> Escolha sua cor de pele<br>
<input type=”radio” name=”grp_cor” value=”preto”> preto<br>
<input type=”radio” name=”grp_cor” value=”branco”> branco <br>
<input type=”radio” name=”grp_cor” value=”amarelo”> amarelo <br>


TIPO DE OBJETO: campo de senha

Digite sua senha: <input type=”password” name=”Senha”>


TIPO DE OBJETO: checkbox

<input type=”checkbox” name=”veiculo” value=”bicicleta”>Bicicleta<br>


 

TIPO DE OBJETO: Dropdown

<select name=”Carros”>
<option value=”bicicleta”>bicicleta</option>
<option value=”uno”>uno</option>
<option value=”palio”>palio</option>
<option value=”peugeot”>peugeot</option>
</select>

Obrigado pela sua visita, se voce gostou, curta no facebook e indique aos seus amigos!