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:

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:

Agora nós iremos definir algumas variáveis de configuração:

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:

3. Buscando os dados

Agora vai começar a brincadeira… Vamos criar e executar uma consulta para trazer três colunas da tabela `destaques`:

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.

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:

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:

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:

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!