Criando um sistema de destaques – Parte 3

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 CREATE TABLE IF NOT EXISTS `destaques` (
2   `id` INT UNSIGNED NOT NULL AUTO_INCREMENT ,
3   `titulo` VARCHAR(100) NOT NULL ,
4   `link` VARCHAR(150) NOT NULL ,
5   `imagem` VARCHAR(150) NOT NULL ,
6   `ativo` TINYINT(1)  NOT NULL DEFAULT 1 ,
7   PRIMARY KEY (`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:

1 #blocoDestaques ul li div.fundo {
2     opacity: 0.80;
3     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
4     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
5 }

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 <div id="blocoDestaques">
03
04     <a class="faixa" href="#" title=""><!-- --></a>
05
06     <ul>
07         <li>
08             <a href="#" title="Destaque 1">
09                 <img src="img/destaque1.jpg" alt="Destaque 1" />
10             </a>
11             <div class="fundo"><!--  --></div>
12             <p><a href="#" title="Destaque 1">Destaque 1 - Muita coisa boa!</a></p>
13         </li>
14
15         <li>
16             <a href="#" title="Destaque 2">
17                 <img src="img/destaque2.jpg" alt="Destaque 2" />
18             </a>
19             <div class="fundo"><!--  --></div>
20             <p><a href="#" title="Destaque 2">Destaque 2 - Nem tão bom assim...</a></p>
21         </li>
22
23         <li>
24             <a href="#" title="Destaque 3">
25                 <img src="img/destaque3.jpg" alt="Destaque 3" />
26             </a>
27             <div class="fundo"><!--  --></div>
28             <p><a href="#" 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:

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         <?php foreach ($lista_destaques AS $destaque) { ?>
09         <li>
10             <a href="<?php echo $destaque->link; ?>" title="<?php echo $destaque->titulo; ?>">
11                 <img src="<?php echo $destaque->imagem; ?>" alt="<?php echo $destaque->titulo; ?>" />
12             </a>
13             <div class="fundo"><!--  --></div>
14             <p><a href="<?php echo $destaque->link; ?>" title="<?php echo $destaque->titulo; ?>"><?php echo $destaque->titulo; ?></a></p>
15         </li>
16         <?php } ?>
17     </ul>
18 </div>
19 <!-- /destaques -->

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)) { ?>
04 <div id="blocoDestaques">
05
06     <a class="faixa" href="#" title=""><!-- --></a>
07
08     <ul>
09         <?php foreach ($lista_destaques AS $destaque) { ?>
10         <li>
11             <a href="<?php echo $destaque->link; ?>" title="<?php echo $destaque->titulo; ?>">
12                 <img src="<?php echo $destaque->imagem; ?>" alt="<?php echo $destaque->titulo; ?>" />
13             </a>
14             <div class="fundo"><!--  --></div>
15             <p><a href="<?php echo $destaque->link; ?>" title="<?php echo $destaque->titulo; ?>"><?php echo $destaque->titulo; ?></a></p>
16         </li>
17         <?php } ?>
18     </ul>
19 </div>
20 <?php } ?>
21 <!-- /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!
 
Fonte: http://blog.thiagobelem.net/criando-um-sistema-de-destaques-parte-3/