Professional Documents
Culture Documents
Lucio
36,690 xp
Um bom exemplo so os sites das lojas virtuais, como Amazon e etc. Neles, voc consegue adicionar e remover
produtos do carrinho, alterar produtos, etc. E a grande graa que todos as informaes ficam salvas em servidores na
Internet. Assim, qualquer pessoa pode acessar a lista de produtos sempre atualizada.
Neste curso, faremos uma loja de produtos, e o disponibilizaremos na internet. A aplicao ser grande: adicionaremos
produtos, categorias, os listaremos, e etc. No meio do caminho, precisaremos aprender diversos fundamentos da web.
Como funciona o processo de termos um servidor e um cliente, distantes um do outro? Como vrios clientes
conseguem acessar o mesmo servidor?
Para comear o curso, voc j deve ter instalado na sua mquina o XAMPP. O XAMPP nada mais do que um utilitrio
que j instala o PHP, o Apache e o MySql, que so todas as ferramentas que precisamos para trabalhar no curso. Se
voc ainda no instalou, voc o instalar no primeiro exerccio.
Vamos conferir se a instalao est correta. No diretrio que criamos as nossas pginas (que o diretrio de instalao
do XAMPP, por exemplo, /Applications/XAMPP/xamppfiles/htdocs ), vamos criar um diretrio /loja . Em seguida,
vamos abrir esse diretrio em algum editor de texto, para que possamos lidar com os diversos arquivos que criaremos
ao longo do tempo no nosso curso.
<html>
<h1>Bem vindo!</h1>
</html>
Se quisermos testar, basta abrirmos o browser e acessarmos: http://localhost/loja/ . Localhost quer dizer a
prpria mquina, e /loja justamente o sub-diretrio que criamos. Poderamos acessar o endereo de outra forma
tambm: http://localhost/loja/index.php .
Vamos entender o que aconteceu. Quando voc digitou um endereo no navegador, o navegador foi at o servidor, e o
servidor devolveu uma resposta para o browser, que a mostrou. possvel ver o HTML que chegou no browser, por
meio da opo View -> Developer -> View Source do Chrome.
No caso acima, ambas as URLs devolvem o mesmo contedo, pois o servidor inteligente: se voc faz uma requisio
para uma pasta, e no especifica um arquivo exato (como um .php ou .html), ele ento procura por um arquivo chamado
"index.php", e devolve o contedo dele.
Uma outra maneira tambm de ver a requisio e a resposta acontecendo usando a aba de Desenvolvedor do
Chrome. View -> Developer -> Developer Tools . Outros navegadores tambm tem opes semelhantes. Se
dermos um refresh na pgina, podemos v-la na aba Network . Se olharmos ali, vemos que a requisio funcionou
(voltou status 200, que significa sucesso, e entenderemos melhor mais pra frente).
Vamos agora criar a pagina que adiciona um produto: adiciona-produto.php . Vamos comear colocando a
mensagem de cadastro com sucesso:
<html>
Produto NOME adicionado com sucesso!
</html>
<html>
<?php
$nome = $_GET["nome"];
?>
Produto NOME adicionado com sucesso!
</html>
Veja que dentro do cdigo PHP, declaramos uma varivel "nome", usando $ , e usamos o $_GET[] , que um array, e
pega os valores que foram passados pelo usurio na URL. No nosso caso, fizemos $_GET['nome'] , porque o parmetro
enviado pela URL se chama "nome". Podemos fazer a mesma coisa para o "preco". Vamos j tambm imprimir a varivel
"nome" tambm no lugar da palavra "NOME":
<html>
<?php
$nome = $_GET["nome"];
$preco = $_GET["preco"];
?>
Produto <?php echo $nome; ?> adicionado com sucesso!
</html>
Quando o comando php escrito em uma nica linha, o ponto-e-vrgula opcional. Aqui, vamos usar para manter um
padro. Vamos dar um refresh na pgina e ver o resultado. O nome agora apareceu no lugar certo!
<html>
<?php
$nome = $_GET["nome"];
$preco = $_GET["preco"];
?>
Produto <?php echo $nome; ?>, <?php echo $preco; ?> adicionado com sucesso!
</html>
Tambm funciona! Como exibiremos informao o tempo todo no PHP, existe um atalho que facilita: <?= $nome; ?> :
<html>
<?php
$nome = $_GET["nome"];
$preco = $_GET["preco"];
?>
Produto <?= $nome; ?>, <?= $preco; ?> adicionado com sucesso!
</html>
Agora vamos criar o formulrio que vai mandar essas informaes, afinal no queremos que o usurio digite direto na
URL. No arquivo produto-formulario.php , colocaremos:
<html>
<form>
Nome: <input type="text" name="nome" /><br/>
Preo: <input type="number" name="preco" /><br/>
Veja que demos nomes aos campos de texto, pois atravs desse nome, que conseguiremos recuperar a informao l
no PHP. Se acessarmos o formulrio pelo browser, temos a seguinte tela:
Se preenchermos o formulrio, e clicarmos no boto, ele vai enviar as informaes! Mas repare que ele enviou para a
pgina errada. Ele enviou para a prpria pgina. Precisamos mudar isso, pois precisamos mandar para a pgina
adiciona-produto.php . Fazemos essa mudana no form:
<form action="adiciona-produto.php">
</form>
Vamos testar de novo. Abrimos o formulrio e cadastramos. Agora funcionou! Os dados que foram digitados no
formulrio, foram submetidos para a adiciona-produto.php , que por sua vez pegou os valores informados pelo
usurio e os exibiu. Veja que aqui tivemos 2 requisies: uma para pedir o formulrio, e a resposta foi o formulrio; a
outra foi o envio das informaes, e a resposta foi a mensagem elegante confirmando a adio.
Mas por enquanto nosso sistema est feio. Vamos fazer uso de uma biblioteca famosa, chamada Bootstrap, que vem
com um conjunto de CSS que j nos ajudam. Voc pode baix-lo em getbootstrap.com , clicando em Download
Bootstrap.
Ao descompactar a biblioteca, vemos que ela composta por 3 diretrios: css, fonts, js. Vamos copiar as 3 pastas para
nosso projeto. Para us-lo, basta importar o CSS. Vamos na nossa pgina principal, criar a tag HEAD, e importar o CSS
do bootstrap. Alm disso, vamos fazer uso das classes do bootstrap, que deixaro nosso site bonito:
<html>
<head>
<title>Minha loja</title>
<meta charset="utf-8">
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/loja.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="principal">
<h1>Bem vindo!</h1>
</div>
</div>
</body>
</html>
Veja tambm que colocamos o loja.css, que ser o css da nossa loja. Vamos cri-lo, pois precisamos escrever a classe
"principal":
body {
padding-top: 50px;
}
.principal {
padding: 40px 15px;
text-align: center;
}
Se abrirmos o index.php no browser, vemos que a fonte j est mais elegante, o texto centralizado, e etc. Aos poucos
vamos usando mais coisas do Bootstrap.
<html>
<head>
<title>Minha loja</title>
<meta charset="utf-8">
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/loja.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="principal">
<?php
$nome = $_GET["nome"];
$preco = $_GET["preco"];
?>
Produto <?= $nome; ?>, <?= $preco; ?> adicionado com sucesso!
</div>
</div>
</body>
</html>
Mas d pra melhorar ainda mais, j que o Bootstrap tem bastante coisa legal. Vamos pegar a mensagem de sucesso e
colocar num pargrafo com a classe "alert-success":
<p class="alert-success">
Produto <?= $nome; ?>, <?= $preco; ?> adicionado com sucesso!
</p>
Vamos fazer a mesma coisa agora na pgina de formulrio, e colocar um H1 para indicar que um formulrio:
<html>
<head>
<title>Minha loja</title>
<meta charset="utf-8">
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/loja.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="principal">
<h1>Formulrio de cadastro</h1>
<form action="adiciona-produto.php">
Nome: <input type="text" name="nome" /><br/>
Preo: <input type="number" name="preco" /><br/>
</div>
</div>
</body>
</html>
O formulrio tambm j est melhor. Mas o problema que nesses arquivos temos um monte de copy-and-paste. Todo
copiar e colar ruim, pois se precisarmos mudar algo, precisaremos mudar em todos, e o trabalho ser muito grande!
Vamos ento separar esse cdigo repetido e colocar em um nico arquivo, comeando pela parte de cima, no
cabecalho.php :
<html>
<head>
<title>Minha loja</title>
<meta charset="utf-8">
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/loja.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="principal">
</div>
</body>
</html>
Vamos agora fazer uso desses arquivos que criamos. Nos arquivos anteriores, vamos jogar fora o "cdigo repetido" e
incluir ambos os PHPs que criamos:
<h1>Formulrio de cadastro</h1>
<form>
Nome: <input type="text" name="nome" /><br/>
Preo: <input type="number" name="preco" /><br/>
Veja s como agora est melhor. Se mudarmos o cabealho ou rodap, mudaremos em um nico lugar!
Nesse captulo ento aprendemos que o mundo web funciona atravs de requisies e respostas. O servidor processa a
requisio e envia uma resposta de volta ao browser. Aprendemos tambm que para programar PHP no meio do
HTML, basta abrir a tag PHP. Aprendemos tambm a reaproveitar cdigo, usando a tag include .
Termos e condies FAQ Forum Sobre Sugira um curso Sugira uma funcionalidade