segunda-feira, 28 de setembro de 2015

Catálogo dinâmico em ASP com fotos 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. Segue 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 da imagem de cada capa.

2. O segundo passo é criar em seu computador uma pasta para as imagens (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:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Catalogo simples com MySQL</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>
Catalogo simples com MySQL - clique no titulo de um livro para ver detalhes <br />
<br />
<table width="346" border="1">
  <tr>
    <td><div align="center"><strong> Categoria</strong></div></td>
    <td width="178"><div align="center"><strong>Titulo</strong></div></td>
  </tr>
</table>

<%
dim conexmy,Recordset1

set conexmy = Server.CreateObject("ADODB.Connection")
conexmy.Open "Driver={MySQL ODBC 5.1 Driver};SERVER=localhost;DATABASE=XXX;USER=XXX;PASSWORD=XXX;"

Set Recordset1 = conexmy.execute("select * from livros")

while not Recordset1.EOF%>
<br />
<%=Recordset1.Fields("id")%> -
<%=Recordset1.Fields("categoria")%> -

<a href='detalhes_livros.asp?id=<%=Recordset1.Fields("id")%>'><%=Recordset1.Fields("titulo")%></a>
&nbsp;

<%
Recordset1.MoveNext
wend
%>

</p>
</body>
</html>
<%
Recordset1.Close()
Set Recordset1 = Nothing
%>

5. Substitua os três “XXX” acima pelos seus dados. Importante: neste tutorial, estamos usando uma conexão MyODBC ao Mysql. Para isso, vc precisa ter o “driver” MyODBC instalado. Caso não saiba como fazer isso, há varias dicas aqui: Instalar driver MyODBC.

6. Repare que cada título é um “link” para outra página com os detalhes de um livro selecionado que será criada adiante. Salve e teste no navegador, mas sem acionar os “links” ainda; o importante, por enquanto, é que o “id” seja exibido corretamente; veja, no exemplo, passando-se o mouse sobre o titulo do livro nº 6:



7. A página de detalhes

Agora sim podemos concluir nosso catálogo; crie uma nova página (neste tutorial chamei-a de “detalhes_livros.asp”), vc pode copiar o código abaixo, mas atenção à essa linha:

<img src="XXX/<%=(Recordset1.Fields.Item("capa").Value)%>">

Conforme fazemos com a conexão, substitua os três “XXX” acima pelo nome da sua pasta de imagens criada no passo 2, acima.

<%@LANGUAGE="VBSCRIPT"%>

<%

dim conexmy,Recordset1,vid

set conexmy = Server.CreateObject("ADODB.Connection")
conexmy.Open "Driver={MySQL ODBC 5.1 Driver};SERVER=localhost;DATABASE=XXX;USER=XXX;PASSWORD=XXX;"

vid=Request.QueryString("id")

Set Recordset1 = conexmy.execute("SELECT * FROM livros WHERE id = " & vid)

%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>detalhes - livros</title>
</head>

<body>

<table width="654" border="1">
  <tr>
   <td width="169"><img src=XXX/<%=(Recordset1.Fields.Item(“capa").Value)%>"></td>
<td width="469">
<%=(Recordset1.Fields.Item("id").Value)%> -
<%=(Recordset1.Fields.Item("categoria").Value)%> -
<%=(Recordset1.Fields.Item("titulo").Value)%> <br />
<%=(Recordset1.Fields.Item("autor").Value)%><br /><br />
<%=(Recordset1.Fields.Item("paginas").Value)%> páginas -
Ano: <%=(Recordset1.Fields.Item("ano").Value)%><br />
<%= FormatCurrency((Recordset1.Fields.Item("preco").Value), -1, -2, -2, -2) %><br /><br />
<%=(Recordset1.Fields.Item("resumo").Value)%>

</td>
  </tr>
</table>

<p>&nbsp;</p>
</body>
</html>
<%
Recordset1.Close()
Set Recordset1 = Nothing
%>

Salve e teste no navegador.