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/
