Vamos começar escolhendo nosso template. Aqui devo utilizar um do W3Schools

Nós vamos transformar essa tela, nesta:

 

O objetivo é trocar o título e fazer com que as chamadas virem links para as páginas dos candidatos.

 

Nosso primeiro passo é pegar o código fonte do template, que está disponível aqui: https://www.w3schools.com/w3css/w3css_templates.asp com o nome Food Blog

(mas você pode usar o código fonte do seu template, se quiser)

 

Observação: note que os códigos abaixo estão na ordem em que aparecem no documento, de cima para baixo.

 

Primeiro passo: alterar o cabeçalho

Código original

<!DOCTYPE html>

<html>

<title>W3.CSS Template</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Karma">

<style>

body,h1,h2,h3,h4,h5,h6 {font-family: "Karma", sans-serif}

.w3-bar-block .w3-bar-item {padding:20px}

</style>

<body>

 

Código alterado

<!DOCTYPE html>

<html>

<title>Título da página</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Karma">

<style>

body,h1,h2,h3,h4,h5,h6 {font-family: "Karma", sans-serif}

.w3-bar-block .w3-bar-item {padding:20px}

</style>

<body>

 

A alteração aparece na cor preta entre o código que está em azul.

 

Alterar o menu:

 

Código original:

<nav class="w3-sidebar w3-bar-block w3-card w3-top w3-xlarge w3-animate-left" style="display:none;z-index:2;width:40%;min-width:300px" id="mySidebar">

<a href="javascript:void(0)" onclick="w3_close()"

class="w3-bar-item w3-button">Close Menu</a>

<a href="#food" onclick="w3_close()" class="w3-bar-item w3-button">Food</a>

<a href="#about" onclick="w3_close()" class="w3-bar-item w3-button">About</a>

</nav>

 

Código alterado:

<nav class="w3-sidebar w3-bar-block w3-card w3-top w3-xlarge w3-animate-left" style="display:none;z-index:2;width:40%;min-width:300px" id="mySidebar">

<a href="javascript:void(0)" onclick="w3_close()"

class="w3-bar-item w3-button">Fechar menu</a>

<a href="#estadual" onclick="w3_close()" class="w3-bar-item w3-button">Deputado/a estadual</a>
<a href="#federal" onclick="w3_close()" class="w3-bar-item w3-button">Deputado/a federal</a>

<a href="#senado" onclick="w3_close()" class="w3-bar-item w3-button">Senador/a</a>

<a href="#governo" onclick="w3_close()" class="w3-bar-item w3-button">Governador</a>

<a href="#about" onclick="w3_close()" class="w3-bar-item w3-button">Sobre</a>

</nav>

 

Alterar o cabeçalho

 

Código original:

<div class="w3-top">

<div class="w3-white w3-xlarge" style="max-width:1200px;margin:auto">

<div class="w3-button w3-padding-16 w3-left" onclick="w3_open()">☰</div>

<div class="w3-right w3-padding-16">Mail</div>

<div class="w3-center w3-padding-16">My Food</div>

</div>

</div>

 

Código alterado:

<div class="w3-top">

<div class="w3-white w3-xlarge" style="max-width:1200px;margin:auto">

<div class="w3-button w3-padding-16 w3-left" onclick="w3_open()">☰</div>

<div class="w3-right w3-padding-16">Candidatos/as </div>

<div class="w3-center w3-padding-16"><h1>Eleições 2018</h1></div>

</div>

</div>

 

Inserir código de conexão com o banco de dados:

 

Código original:

<!-- !PAGE CONTENT! -->

<div class="w3-main w3-content w3-padding" style="max-width:1200px;margin-top:100px">

 

Código alterado:

<!-- !PAGE CONTENT! -->

<div class="w3-main w3-content w3-padding" style="max-width:1200px;margin-top:100px">
<?php

mysql_connect("servidor", "usuario", "senha") or die("Error connecting to database: ".mysql_error());

//credenciais de conexão com o banco. Você precisa alterar os valores para um que seja verdadeiro para o seu servidor.

mysql_select_db("nome_do_banco") or die(mysql_error());

$id = $_GET['id'];
//seleção do banco de dados

$raw_results = mysql_query("SELECT `NM_URNA_CANDIDATO`,`SG_PARTIDO`,`DS_CARGO`, `NR_CPF_CANDIDATO` FROM `candidatos`") or die(mysql_error());
//busca no banco de dados da lista de candidatos com nome, sigla do partido, cargo disputado e cpf

while($results = mysql_fetch_array($raw_results)){
//loop que vai manter a execução do Código enquanto ainda houver resultados na busca do banco.

?>

 

O código acima se conecta ao banco, consulta a tabela candidatos e retorna uma lista dos dados dos candidatos. Por fim, abre um loop que vai manter a execução do código enquanto ainda houver resultados.

Agora precisamos exibir os resultados na página, compondo um item para cada candidato.

 

Código original

<div class="w3-row-padding w3-padding-16 w3-center" id="food">

<div class="w3-quarter">

<img src="/w3images/sandwich.jpg" alt="Sandwich" style="width:100%">

<h3>The Perfect Sandwich, A Real NYC Classic</h3>

<p>Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum.</p>

</div>

<div class="w3-quarter">

<img src="/w3images/steak.jpg" alt="Steak" style="width:100%">

<h3>Let Me Tell You About This Steak</h3>

<p>Once again, some random text to lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.</p>

</div>

<div class="w3-quarter">

<img src="/w3images/cherries.jpg" alt="Cherries" style="width:100%">

<h3>Cherries, interrupted</h3>

<p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>

<p>What else?</p>

</div>

<div class="w3-quarter">

<img src="/w3images/wine.jpg" alt="Pasta and Wine" style="width:100%">

<h3>Once Again, Robust Wine and Vegetable Pasta</h3>

<p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>

</div>

</div>

 

Código alterado:

<div class="w3-row-padding w3-padding-16 w3-center" id="food">

<div class="w3-quarter">

<img src="/w3images/sandwich.jpg" alt="Sandwich" style="width:100%">

<h3><?php

echo "<a href=candidato.php?id=".$results['NR_CPF_CANDIDATO'].">"

.$results['NM_URNA_CANDIDATO'];

?> //esse código cria um link para a página candidato já com a id certa e mostra na tela o nome de urna da pessoa

</h3>

<p><?php

echo $results['SG_PARTIDO']." - ".$results['DS_CARGO'];

?>//esse Código exibe o partido e o cargo em disputa pelo candidato

</p>

</div>

<?php

} //isso fecha o loop while

?>

</div>

<span style="text-decoration: line-through;"><div class="w3-quarter"></span>

<span style="text-decoration: line-through;">      <img src="/w3images/steak.jpg" alt="Steak" style="width:100%"></span>

<span style="text-decoration: line-through;">      <h3>Let Me Tell You About This Steak</h3></span>

<span style="text-decoration: line-through;">      <p>Once again, some random text to lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.</p></span>

<span style="text-decoration: line-through;">    </div></span>

<span style="text-decoration: line-through;">    <div class="w3-quarter"></span>

<span style="text-decoration: line-through;">      <img src="/w3images/cherries.jpg" alt="Cherries" style="width:100%"></span>

<span style="text-decoration: line-through;">      <h3>Cherries, interrupted</h3></span>

<span style="text-decoration: line-through;">      <p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p></span>

<span style="text-decoration: line-through;">      <p>What else?</p></span>

<span style="text-decoration: line-through;">    </div></span>

<span style="text-decoration: line-through;">    <div class="w3-quarter"></span>

<span style="text-decoration: line-through;">      <img src="/w3images/wine.jpg" alt="Pasta and Wine" style="width:100%"></span>

<span style="text-decoration: line-through;">      <h3>Once Again, Robust Wine and Vegetable Pasta</h3></span>

<span style="text-decoration: line-through;">      <p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p></span>

<span style="text-decoration: line-through;">    </div></span>

<span style="text-decoration: line-through;">  </div>  </span>A parte do código que está riscada deve ser apagada. Não precisamos de 4 divs porque o código vai gerar uma nova div para cada candidato.

 

O restante do código pode, por enquanto, ser mantido como no original.

 

 

Pronto! Agora é só salvar o arquivo com a extensão php e colocar ele no servidor do Infinity free.

Abra a url do arquivo no navegador para ver o resultado. A tela deve ficar assim: