1

[Pitch] - Hello World com Php e Mysql

Tutorial Banco de Dados

O intuito desse tutorial é apresentar o php e mysql que são softwares baseados em código digitado.
Para seguir esse tutorial são necessárias muitas ações além de escrever código, mas o principal é o ato de codar.

  • C - Create (armazenar no banco de dados)
  • R - Read (acessar registros na base de dados)
  • U - Update (alterar registro)
  • D - Delete (excluir registro)

php - Linguagem de programação de servidores
sql - Linguagem de bancos de dados

Instalar o Xampp

O Xampp é um software que emula um webserver.
Ele instala o php e o mysql.
xampp

Criar um arquivo html

Crie um arquivo chamado index.html
É importante entender que esse tipo de arquivo contém um tipo de código que é ao mesmo tempo entendível por seres humanos e renderizável pelos computadores.

Escreva "hello world" nesse arquivo.
Salve e 'execute pelo browser'.

Perceba que são duas maneiras diferentes de lidar com o mesmo arquivo.

Xampp emula websever

Um webserver tradicional é um computador como outro qualquer, só que ele fica conectado a internet 24hs por dia.
Quando outro computador acessa o webserver ele envia arquivos.
Basicamente ele fica ligado o tempo todo esperando uma 'requisição'.
Quando ocorre uma requisição ele envia uma resposta.
xampp
O Xampp emula um webserver.
No painel de controle do Xampp é possível startar o apache.
O apache é o php.
Ele serve para que o programador escreva instruções para o server executar quando ele receber a requisição.

Exemplo: Quando o user envia uma requisição para o server, ele pode armazenar algo no banco de dados.

O mysql também fica apenas experando para ser acionado.
A diferença é que quem acessa o mysql é o proprio php.

O php recebe a requisição, depois ele busca a informação no banco de dados e depois ele devolve a resposta para o usuário.

php / htdocs / localhost

É preciso que os arquivos estejam dentro da pasta xampp/htdocs/

Quando o apache recebe a requisição ele procura na pasta xampp/htdocs/ qual arquivo php deve ser executado.

Para começar vamos criar um arquivo chamado 'index.php' na pasta xampp/htdocs/produtos

O conteúdo desse arquivo:

<!doctype html>
<html>
<body>

codigo html<br>

<?php
echo "codigo php<br>";
?>

</body>
</html>

Para acessar pelo browser basta digitar localhost/produtos
(é preciso que o php esteja startado no xampp)
xampp

Tela de Cadastro

Para começar a fazer o cadastro do produto podemos utilizar o seguinte código:

<!doctype html>
<html>

<head>
<style>
body{
	margin:0px;
	background-color:#e1e1e1;
	font-family:'Segoe Ui';
}

footer{
	position:fixed;
	display:block;
	width:100vw;
	bottom:0px;
	background-color:#8899bb;
	color:#333333;
	padding:20px;
}

h1{
	background-color:#8899bb;
	color:#333333;
	padding:20px;
	margin-top:0px;
}

table{
	background-color:#ffffff;
	padding:8px;
	margin:0px auto;
}

textarea{
	width:240px;
	height:66px;
}

th{
	background-color:#88bb99;
	color:#333333;
	padding:10px;
}

.aviso{
	background-color:#aa0000;
	color:#ffffff;
	font-weight:bold;
	padding:16px;
	text-align:center;
}

##preco{
	width:60px;
}
</style>
</head>

<body>
<h1>Tutorial CRUD</h1>

<form action=index.php method=post enctype=multipart/form-data>
<table>
	<tr>
		<th colspan=2>Cadastro de Produto</th>
	</tr>

	<tr>
		<td>Nome</td>
		<td><input name=nome></td>
	</tr>
	<tr>
		<td>Descrição</td>
		<td><textarea name=descricao></textarea></td>
	</tr>
	<tr>
		<td>Imagem</td>
		<td><input name=arq type=file></td>
	</tr>
	<tr>
		<td>Preço</td>
		<td><input name=preco id=preco></td>
	</tr>

	<tr>
		<td colspan=2 align=right>
			<button>Salvar</button>
		</td>
	</tr>
</table>
</form>

<footer></footer>

</body>
</html>

xampp

Criando a base de dados (com mouse)

Vamos começar a lidar com a base de dados.
Para isso vamos usar o phpMyAdmin que vem instalado no Xampp.
xampp
xampp

É preciso criar uma nova base de dados.
Podemos dar o nome tutorial.

É preciso criar uma tabela chamada produtos.
Com os campos:

  • id (int auto_increment)
  • nome (varchar)
  • descricao (varchar)
  • imagem (varchar)
  • preco (varchar)

É importante que o campo id seja auto_increment

create table

seria possível criar a estrutura da base de dados enviando comandos sql

veja esse exemplo rascunho de comando sql:

create table produtos(
	id integer not null primary key auto_increment,
	nome varchar
);

Comando insert

Vamos fazer com que a tela de cadastro envie os dados para o DB.

<body>
<h1>Tutorial CRUD</h1>

<?php
$conn = new PDO('mysql:host=localhost;dbname=tutorial', 'root', ''); //conexão com a base de dados

if(isset($_POST['nome'])) { //quando o user preenche o campo nome da página e clica em salvar, o browser envia nova request para o server. nessa nova request existe uma varável do tipo POST

	$conn -> query("insert into produtos(nome, descricao, preco) values('".$_POST['nome']."', '".$_POST['descricao']."', '".$_POST['preco']."')"); //nessa linha o php envia um comando para inserir na base de dados

	if(isset($_FILES['arq']) && ($_FILES['arq']['tmp_name']) != '') { //se o user fez o upload da imagem do produto
		@mkdir("imagens"); //cria a pasta imagens dentro de xampp/htdocs/produtos

		$inserido = $conn -> lastInsertId(); //esse comando armazena o id do produto que foi inserido na base de dados

		move_uploaded_file($_FILES['arq']['tmp_name'], "imagens/" . $inserido . "_" . $_FILES['arq']['name']); //esse comando move o arquivo uppado (do endereço temporário para a pasta xampp/htdocs/produtos

		$conn -> query("update produtos set imagem='" . $inserido . "_".$_FILES['arq']['name']."' where id=" . $inserido); //esse comando coloca o nome da imagem uppada na base de dados
	}
	echo "<div class=aviso>produto inserido na base de dados</div><br>\\n";
}
?>

<form action=index.php method=post enctype=multipart/form-data>
<table>

Lista de Produtos

Abaixo do formulário podemos exibir a lista de produtos cadastrados.

</table>
</form>

<?php

$stmt = $conn -> query("select id,nome from produtos"); //envia a query para a base de dados

if($stmt -> rowCount()) { //se existe algum produto cadastrado
	echo "<br><br>\\n";
	echo "<table>\\n";

	while($row = $stmt -> fetch()) { //o db vai armazenando na variável $row o valor de cada registro
		echo "<tr>"; //uma linha da tabela de produtos

		echo "<td>" . $row['id'] . "</td>";
		echo "<td>" . $row['nome'] . "</td>"; //o nome do produto

		echo "<td><button onclick="location.href='index.php?id=" . $row['id'] . "';">Editar</button></td>"; //botão para editar produto
		echo "<td><button onclick="if(confirm('Tem Certeza ?'))location.href='index.php?del=" . $row['id'] . "';">Excluir</button></td>"; //botão para deletar

		echo "</tr>\\n";
	}

	echo "</table>\\n";
}

?>

<footer></footer>

xampp

Comando delete


<?php
$conn = new PDO('mysql:host=localhost;dbname=tutorial', 'root', ''); //conexão com a base de dados

if(isset($_GET['del'])) { //se na url está index.php?del=7 exclui o produto 7

	$conn -> query("delete from produtos where id=" . $_GET['del']); //envia o comando de deletar para a base de dados

	echo "<div class=aviso>produto excluído da base de dados</div><br>\\n"; //exibe mensagem de confirmação
}

?>

Update

Para implementar a alteração é preciso reescrever o formulário de cadastro para que ele busque os dados.

if(isset($_POST['nome'])) { //se a página formulário postou algo para o db

	if(isset($_GET['id'])) { //se na url está definido um id então os dados do produto devem ser ALTERADOS no db

		$conn -> query("update produtos set nome='" . $_POST['nome'] . "', descricao='" . $_POST['descricao'] . "', preco='" . $_POST['preco'] . "' where id=" . $_GET['id']); //essa linha envia para o db o comando de update

		if(isset($_FILES['arq']) && $_FILES['arq']['tmp_name'] != '') { //se um arquivo/imagem foi enviado

			@mkdir("imagens"); //cria a pasta imagens dentro de xampp/htdocs/produtos (caso não existir)

			move_uploaded_file($_FILES['arq']['tmp_name'], "imagens/" . $_GET['id'] . "_" . $_FILES['arq']['name']); //esse comando move o arquivo uppado (do endereço temporário para a pasta xampp/htdocs/produtos

			$conn -> query("update produtos set imagem='" . $_GET['id'] . "_" . $_FILES['arq']['name'] . "' where id=" . $_GET['id']); //esse comando atualiza na base de dados o endereço da imagem do produto
		}

		echo "<div class=aviso>os dados do produto foram alterados</div><br>\\n"; //mensagem de confirmação

	}
	else{ //se na url NÃO está definido um id então os dados do produto devem ser INSERIDOS no db

		$conn -> query("insert into produtos(nome, descricao, preco) values('".$_POST['nome']."', '".$_POST['descricao']."', '".$_POST['preco']."')"); //nessa linha o php envia um comando para inserir na base de dados

		if(isset($_FILES['arq']) && ($_FILES['arq']['tmp_name']) != '') { //se o user fez o upload da imagem do produto
			@mkdir("imagens"); //cria a pasta imagens dentro de xampp/htdocs/produtos

			$inserido = $conn -> lastInsertId(); //esse comando armazena o id do produto que foi inserido na base de dados

			move_uploaded_file($_FILES['arq']['tmp_name'], "imagens/" . $inserido . "_" . $_FILES['arq']['name']); //esse comando move o arquivo uppado (do endereço temporário para a pasta xampp/htdocs/produtos

			$conn -> query("update produtos set imagem='" . $inserido . "_".$_FILES['arq']['name']."' where id=" . $inserido); //esse comando coloca o nome da imagem uppada na base de dados
		}
		echo "<div class=aviso>produto inserido na base de dados</div><br>\\n";
	}
}
if(isset($_GET['id'])) { //se houver um id na url, então a página exibe os dados do produto para que o user possa editar

	$stmt = $conn -> query("select * from produtos where id=" . $_GET['id']); //busca no db os dados do produto

	$row = $stmt->fetch(); //armazena os dados do produto na variável $row

	if(is_file("imagens/" . $row['imagem'])) //se existe a imagem
		echo "<center><img src='imagens/".$row['imagem']."' style='max-width:300px;'></center><br>\\n"; //exibe a imagem do produto

	echo "<form action=index.php?id=".$_GET['id']." method=post enctype=multipart/form-data>\\n";
	echo "<table>\\n";
	echo "<tr><th colspan=2>Alterar dados do Produto</th></tr>\\n";
}
else{ //se não há id na url, então a página exibe o formulário para o user inserir dados

	$row['nome']=$row['descricao']=$row['preco']=""; //inicializa as variáveis $row que serão utilizadas no form

	echo "<form action=index.php method=post enctype=multipart/form-data>\\n";
	echo "<table>\\n";
	echo "<tr><th colspan=2>Cadastro de Produto</th></tr>\\n";
}

echo "<tr><td>Nome</td><td><input name=nome value='" . $row['nome'] . "'></td></tr>\\n";
echo "<tr><td>Descrição</td><td><textarea style='width:240px; height:66px;' name=descricao>" . $row['descricao'] . "</textarea></td></tr>\\n";
echo "<tr><td>Imagem</td><td><input name=arq type=file></td></tr>\\n";
echo "<tr><td>Preço</td><td><input name=preco style='width:60px;' value='" . $row['preco'] . "'></td></tr>\\n";

echo "<tr><td colspan=2 align=right>";
if(isset($_GET['id'])) //se o form está exibindo dados (para serem editados)
	echo "<input type=button value=Novo onclick="location.href='index.php';"> "; //um botão para ir da pag de edição para a pag de criação
echo "<input type=submit value=Salvar></td></tr>\\n";

echo "</table>\\n";
echo "</form>\\n";
Carregando publicação patrocinada...