terça-feira, 29 de setembro de 2015

Catálogo dinâmico em PHP, com PDO, imagens e MySQL



Neste tutorial vamos ver como criar um catálogo simples com bancos de dados e fotos. O catálogo será de livros, com as respectivas imagens das capas. Siga o passo a passo:


1. Primeiro crie uma tabela no MySQL com o seguinte código:

CREATE TABLE `livros` (
  `id` int(10) unsigned NOT NULL auto_increment,
  `categoria` varchar(50) default NULL,
  `titulo` varchar(200) default NULL,
  `autor` varchar(100) default NULL,
  `paginas` tinyint(3) unsigned default NULL,
  `ano` char(4) default NULL,
  `preco` decimal(8,2) unsigned default NULL,
  `resumo` text,
  `capa` varchar(50) default NULL,
  PRIMARY KEY  (`id`),
  UNIQUE KEY `id` (`id`),
  KEY `id_2` (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1

Na coluna “capa” cadastre o nome das imagens de cada capa.

2. O segundo passo é criar em seu computador uma pasta para as imagens. Atenção: neste tutorial, a pasta de imagens estará no mesmo nível (na mesma pasta) que as páginas PHP (v. exemplo abaixo):



3. Cadastre alguns livros na tabela e vamos criar uma primeira página simples, apenas com os títulos dos livros e as categorias:

<?php
$con=new PDO('mysql:host=XXX;dbname=XXX', 'XXX', 'XXX');
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>cat&aacute;logo simples com PDO</title>
<style type="text/css">
<!--
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
a:active {
    text-decoration: none;
}
-->
</style></head>

<body>

<h2>Livros disponíveis</h2>
Para ver detalhes sobre um livro, clique em seu título:<br />
<br />
<?php

$stmt = $con->prepare("select id, titulo, categoria from livros");
$stmt->execute();
?>

<table border="1">
   
<?php

while($reg = $stmt->fetch(PDO::FETCH_OBJ))
{
?>

   <tr>
     <td><?php echo"<a href='detalhes_livros.php?id=$reg->id'>$reg->titulo</a>";?></td>
     <td><?php echo "$reg->categoria";?></td>
   </tr>

<?php
}

?>
</table>

</body>
</html>

4. Salve e teste no navegador: ao passar o mouse sobre um título, já deverá ser exibido um “link” com o “id” correto (veja figura abaixo):



5. Mas atenção: não adianta clicar no “link”; primeiro é necessário criar a página que exibe o resultado da consulta ao banco de dados (“detalhes_livros.php”):

<?php

// conexão

$idlivro=$_GET['id'];
$rs = $con->prepare("SELECT * FROM livros where id=?");
$rs->bindParam(1, $idlivro);
$rs->execute();

?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Detalhes do livro</title>
<style type="text/css">
<!--
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
a:active {
    text-decoration: none;
}
-->
</style></head>

<body>
<h2>Detalhes do livro:</h2>
<?php
while($row = $rs->fetch(PDO::FETCH_OBJ)){
    echo "<img src='capas/$row->capa'>"."<br /><br />";
    echo $row->titulo." - ";
    echo $row->categoria." - ".$row->autor."<br /><br />";
    echo $row->resumo."<br /><br />";
    echo "Lançamento: ".$row->ano." - ";
    echo "R$".number_format($row->preco,2, ",", "")."<br />";
    }
?>

</body>
</html>

6. Salve e teste no navegador; seu catálogo dinâmico já deverá estar funcionando corretamente: