Hoje vamos fazer a terceira e última parte do nosso sistema de destaques.
Antes de mais nada, queria pedir desculpas pela demora… Minha vida está um pouco atrapalhada agora que estou começando a escrever artigos pra revistas (ha!)… Mas ontem decidi que iria dedicar no mínimo uma hora por dia para o blog, e lá vamos nós!
Nessa parte do tutorial nós iremos criar um arquivo PHP que irá fazer a conexão com o banco de dados (MySQL) e fazer a consulta que trará os dados de cada um dos destaques para “alimentarmos” nosso HTML.
Para o nosso banco de dados iremos utilizar a seguinte tabela:
1
CREATETABLEIF NOTEXISTS `destaques` (
2
`id` INTUNSIGNED NOTNULLAUTO_INCREMENT ,
3
`titulo` VARCHAR(100) NOTNULL,
4
`link` VARCHAR(150) NOTNULL,
5
`imagem` VARCHAR(150) NOTNULL,
6
`ativo` TINYINT(1) NOTNULLDEFAULT1 ,
7
PRIMARYKEY(`id`) )
8
ENGINE = MyISAM;
0. Transparência
Antes da gente começar a codificar a parte três… Vamos colocar uma coisinha no CSS que faltou na Parte 2: a transparência do fundo preto da legenda… Edite o CSS dos destaques e coloque isso:
Isso fará com que a div de fundo fique com 80% de opacidade.
1. Configurações
Vamos começar com um arquivo chamado mysql_destaques.php e nele colocar um bloco PHP vazio:
1
<?php
2
3
?>
Agora nós iremos definir algumas variáveis de configuração:
03
/*
04
* Configurações do sistema de destaques
05
*/
06
$destaques= array(
07
// Dados de conexão ao MySQL
08
'mysql'=> array(
09
'servidor'=> 'localhost',
10
'usuario'=> 'root',
11
'senha'=> '12345',
12
'banco'=> 'meu_site'),
13
14
// Nome da tabela com os destaques
15
'tabela'=> 'destaques',
16
17
// Limite máximo de destaques que serão exibidos
18
'limite'=> 5
19
);
2. Conexão com o MySQL
Se o seu site já se conecta ao banco de dados MySQL automaticamente, você pode apagar a parte da conexão ao MySQL e pular para o item três…
Fazemos a conexão com o banco de dados:
21
/**
22
* Conexão com o MySQL
23
*
24
* Atenção: Comente as próximas linhas se o seu site já se
25
* conectar com o MySQL fora desse script
26
*/
27
mysql_connect($destaques['mysql']['servidor'], $destaques['mysql']['usuario'], $destaques['mysql']['senha']) OR trigger_error('ERRO: '. mysql_error());
28
mysql_select_db($destaques['mysql']['banco']) OR trigger_error('ERRO: '. mysql_error());
3. Buscando os dados
Agora vai começar a brincadeira… Vamos criar e executar uma consulta para trazer três colunas da tabela `destaques`:
30
/*
31
* Busca os dados na tabela de destaques
32
*/
33
$sql= "SELECT `titulo`, `link`, `imagem`
34
FROM `{$destaques['tabela']}`
35
WHERE `ativo` = 1
36
ORDER BY `id` DESC
37
LIMIT {$destaques['limite']}";
38
$query= mysql_query($sql) OR trigger_error('ERRO: '. mysql_error());
Nós já executamos a consulta e já temos o Resource MySQL (ou resultado)… Precisamos apenas rodar um loop e passar esses dados para um array que será usado mais a diante para montar o nosso HTML.
40
/**
41
* Loop que traz os dados do MySQL e armazena-os em um array $lista_destaques
42
*/
43
$lista_destaques= array();
44
while($registro= mysql_fetch_object($query)) {
45
$lista_destaques[] = $registro;
46
}
Pronto… Nosso arquivo está pronto! Veja aqui como ele ficou.
Agora vamos voltar ao HTML do nosso sistema de destaques que até hoje está assim:
01
<!-- destaques -->
02
<divid="blocoDestaques">
03
04
<aclass="faixa"href="#"title=""><!-- --></a>
05
06
<ul>
07
<li>
08
<ahref="#"title="Destaque 1">
09
<imgsrc="img/destaque1.jpg"alt="Destaque 1"/>
10
</a>
11
<divclass="fundo"><!-- --></div>
12
<p><ahref="#"title="Destaque 1">Destaque 1 - Muita coisa boa!</a></p>
13
</li>
14
15
<li>
16
<ahref="#"title="Destaque 2">
17
<imgsrc="img/destaque2.jpg"alt="Destaque 2"/>
18
</a>
19
<divclass="fundo"><!-- --></div>
20
<p><ahref="#"title="Destaque 2">Destaque 2 - Nem tão bom assim...</a></p>
21
</li>
22
23
<li>
24
<ahref="#"title="Destaque 3">
25
<imgsrc="img/destaque3.jpg"alt="Destaque 3"/>
26
</a>
27
<divclass="fundo"><!-- --></div>
28
<p><ahref="#"title="Destaque 3">Destaque 3 - Agora sim... bem melhor!</a></p>
29
</li>
30
</ul>
31
</div>
32
<!-- /destaques -->
Vamos fazer algumas modificações no nosso HTML… Vamos começar incluindo o arquivo PHP que acabamos de criar logo antes da div#blocoDestaques e remover os LIs deixando apenas um:
01
<!-- destaques -->
02
<?php require_once('mysql_destaques.php'); ?>
03
<div id="blocoDestaques">
04
05
<a class="faixa"href="#"title=""><!-- --></a>
06
07
<ul>
08
<li>
09
<a href="#"title="Destaque 1">
10
<img src="img/destaque1.jpg"alt="Destaque 1"/>
11
</a>
12
<div class="fundo"><!-- --></div>
13
<p><a href="#"title="Destaque 1">Destaque 1 - Muita coisa boa!</a></p>
14
</li>
15
</ul>
16
</div>
17
<!-- /destaques -->
Agora é só criar um loop utilizando o foreach() para gerar um LI para cada destaque que foi encontrado no banco de dados… Vamos também substituir os valores “enchedores de linguiça” por valores dinâmicos:
Podemos ainda adicionar uma condição ao redor da div#blocoDestaques para ter certeza que nosso script irá funcionar e não vai deixar nenhum buraco no site:
01
<!-- destaques -->
02
<?php require_once('mysql_destaques.php'); ?>
03
<?php if(isset($lista_destaques) AND !empty($lista_destaques)) { ?>
Com essa condição, se por algum acaso do destino o array $lista_destaques não existir ou for vazio (nenhum destaque encontrado), nós não exibimos nenhum HTML do bloco de destaques, deixando assim o site com um elemento a menos, mas funcionando.
E o nosso sistema de destaques está pronto!
Espero que tenham gostado!
