Nossa meta aqui é criar uma página com os dados do candidato por eleição. Para esse exercício, vou usar um template diferente, mas também do W3schools:

 

Nós vamos transformar essa tela, nesta:

 

Note que à esquerda temos as informações gerais do candidato e à direita os dados por eleição (no momento, apenas a de 2014 e 2018).

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

(o nome é CV Template. Clique em Try it yourself para pegar o código)

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

 

Nosso primeiro passo é mexer na caixa de dados da esquerda.

Código original:

<!-- Page Container -->

<div class="w3-content w3-margin-top" style="max-width:1400px;">

&nbsp;

<!-- The Grid -->

<div class="w3-row-padding">

&nbsp;

<!-- Left Column -->

<div class="w3-third>

 

Código alterado:

<!-- Page Container -->

<div class="w3-content w3-margin-top" style="max-width:1400px;">

&nbsp;

<!-- The Grid -->

<div class="w3-row-padding">

<?php

$mysql = mysql_connect("sql202.epizy.com", "epiz_22225295", "70LB94cEMqSe") or die("Error connecting to database: ".mysql_error());

mysql_set_charset ($mysql, "latin1");

&nbsp;

mysql_select_db("epiz_22225295_teste") or die(mysql_error());
$id = $_GET['id'];

$raw_results = mysql_query("SELECT * FROM `candidatos` WHERE `NR_CPF_CANDIDATO`='$id'") or die(mysql_error());

&nbsp;

while($results = mysql_fetch_array($raw_results)){

?>

<!-- Left Column -->

<div class="w3-third">
Obs: evite simplesmente copiar e colar. É importante entender o que o código faz e corrigir eventuais erros de digitação causados pelo uso de texto do word.

O código acima (que vai ser incluído na página) tem as seguintes funções:

 

<?php

$mysql = mysql_connect("servidor", "usuario", "senha") or die("Error connecting to database: ".mysql_error());
mysql_set_charset ("latin1",$mysql);

Esse trecho de código configure a conexão com o servidor MySQL, inclusive definindo a codificação dos caracteres para evitar problemas com acentos.

 

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

Esse trecho seleciona o banco de dados a ser consultado.

 $id = $_GET['id'];

Aqui o código lê a id que está na URL da página. Esse valor será usado na linha de código a seguir na consulta ao banco

  $raw_results = mysql_query("SELECT * FROM `candidatos` WHERE `NR_CPF_CANDIDATO`='$id'") or die(mysql_error());

essa linha envia uma consulta a tabela candidatos do banco de dados onde o camo do CPF é igual ao valor que veio na URL

 

while($results = mysql_fetch_array($raw_results)){ 

por fim, o loop while mantém a consulta ao banco enquanto ainda houver resultados. Nessa linha nós abrimos a { . A execução do loop contempla todo código entre a { de abertura e a } de fechamento.

?>

 

Agora vamos para as ações do loop. Vamos editar a seguinte parte da tela:

A ideia é preencher essas informações com as do candidato. Para isso, precisamos identificar os elementos e substituir pelo comando PHP que pega o valor necessário nos resultados da busca na tabela.

 

Para incluir o nome, por exemplo:

Código original:

 

<div class="w3-display-bottomleft w3-container w3-text-black"></em>

<em>            <h2>Jane Doe</h2></em>

<em>          </div>

 

Código alterado:

<div class="w3-display-bottomleft w3-container w3-text-black">

<h2> <?php echo $results['NM_URNA_CANDIDATO']; ?></h2>

</div>

 

O que aconteceu?

<?php // aqui abrimos o trecho de código php

echo $results[‘NM_URNA_CANDIDATO’]; //aqui usamos o comando echo, que exibe algo na tela, para mostrar, ao invés de Jane Doe, o item referente à coluna ‘NM_URNA_CANDIDATO’ da linha do candidato.

?> //isso encerra o trecho de código php e volta pro HTML

 

O código completo desse trecho ficará assim:

 

Código original:

<!-- Left Column -->

<div class="w3-third">

&nbsp;

<div class="w3-white w3-text-grey w3-card-4">

<div class="w3-display-container">

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

<div class="w3-display-bottomleft w3-container w3-text-black">

<h2>Jane Doe</h2>

</div>

</div>

<div class="w3-container">

<p><i class="fa fa-briefcase fa-fw w3-margin-right w3-large w3-text-teal"></i>Designer</p>

<p><i class="fa fa-home fa-fw w3-margin-right w3-large w3-text-teal"></i>London, UK</p>

<p><i class="fa fa-envelope fa-fw w3-margin-right w3-large w3-text-teal"></i>[email protected]</p>

<p><i class="fa fa-phone fa-fw w3-margin-right w3-large w3-text-teal"></i>1224435534</p>

<hr>

&nbsp;

<p class="w3-large"><b><i class="fa fa-asterisk fa-fw w3-margin-right w3-text-teal"></i>Skills</b></p>

<p>Adobe Photoshop</p>

<div class="w3-light-grey w3-round-xlarge w3-small">

<div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:90%">90%</div>

</div>

<p>Photography</p>

<div class="w3-light-grey w3-round-xlarge w3-small">

<div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:80%">

<div class="w3-center w3-text-white">80%</div>

</div>

</div>

<p>Illustrator</p>

<div class="w3-light-grey w3-round-xlarge w3-small">

<div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:75%">75%</div>

</div>

<p>Media</p>

<div class="w3-light-grey w3-round-xlarge w3-small">

<div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:50%">50%</div>

</div>

<br>

&nbsp;

<p class="w3-large w3-text-theme"><b><i class="fa fa-globe fa-fw w3-margin-right w3-text-teal"></i>Languages</b></p>

<p>English</p>

<div class="w3-light-grey w3-round-xlarge">

<div class="w3-round-xlarge w3-teal" style="height:24px;width:100%"></div>

</div>

<p>Spanish</p>

<div class="w3-light-grey w3-round-xlarge">

<div class="w3-round-xlarge w3-teal" style="height:24px;width:55%"></div>

</div>

<p>German</p>

<div class="w3-light-grey w3-round-xlarge">

<div class="w3-round-xlarge w3-teal" style="height:24px;width:25%"></div>

</div>

<br>

</div>

</div><br>

&nbsp;

<!-- End Left Column -->

</div>

 

 

Código alterado:

<div class="w3-third">

&nbsp;

<div class="w3-white w3-text-grey w3-card-4">

<div class="w3-display-container">

<img src="avatar_hat.jpg" style="width:100%" alt="Avatar">

<div class="w3-display-bottomleft w3-container w3-text-black">

<h2>

<?php echo $results['NM_URNA_CANDIDATO']; ?>
</h2>

</div>

</div>

<div class="w3-container">

<p><i class="fa fa-font fa-fw w3-margin-right w3-large w3-text-teal"></i><?php echo $results['NM_CANDIDATO'];  ?></p>

<p><i class="fa fa-briefcase fa-fw w3-margin-right w3-large w3-text-teal"></i><?php echo $results['DS_OCUPACAO']; ?></p>

<p><i class="fa fa-heart fa-fw w3-margin-right w3-large w3-text-teal"></i><?php echo $results['NM_MUNICIPIO_NASCIMENTO'];  ?></p>

<p><i class="fa fa-heart-o fa-fw w3-margin-right w3-large w3-text-teal"></i><?php echo $results['DT_NASCIMENTO'];  ?></p>

<p><i class="fa fa-home fa-fw w3-margin-right w3-large w3-text-teal"></i><?php echo $results['DS_NACIONALIDADE']."- ".$results['SG_UF_NASCIMENTO'];  ?></p>

<p><i class="fa fa-envelope fa-fw w3-margin-right w3-large w3-text-teal"></i><?php echo $results['DS_ESTADO_CIVIL'];  ?></p><p><i class="fa fa-hand-o-right fa-fw w3-margin-right w3-large w3-text-teal"></i><?php echo $results['DS_COR_RACA'];  ?></p>

</p><p><i class="fa fa-hand-o-right fa-fw w3-margin-right w3-large w3-text-teal"></i><?php echo $results['DS_SEXO'];  ?></p>

<p><i class="fa fa-file-text fa-fw w3-margin-right w3-large w3-text-teal"></i><?php echo $results['DS_GRAU_INSTRUCAO'];  ?></p>

<p><i class="fa fa-envelope fa-fw w3-margin-right w3-large w3-text-teal"></i><?php echo $results['NM_EMAIL']; } ?></p>

&nbsp;

<hr>

&nbsp;

<span style="text-decoration: line-through;">  <p class="w3-large"><b><i class="fa fa-asterisk fa-fw w3-margin-right w3-text-teal"></i>Skills</b></p></span>

<span style="text-decoration: line-through;">          <p>Adobe Photoshop</p></span>

<span style="text-decoration: line-through;">          <div class="w3-light-grey w3-round-xlarge w3-small"></span>

<span style="text-decoration: line-through;">            <div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:90%">90%</div></span>

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

&nbsp;

</div>

</div><br>

&nbsp;

<!-- End Left Column -->

</div>

 

Note que a única mudança de um item para outro é o nome da coluna do dado. Outro ponto importante de notar é a seguinte linha:

<?php echo $results['NM_EMAIL']; <span style="color: #ff0000;"><strong>}</strong></span> ?>

 

O parênteses em vermelho é o que encerra a execução do loop. Ou seja, acaba aqui a exibição de resultados da busca no banco.

 

O resultado desse código será o seguinte:

 

Agora seguimos editando o próximo trecho, que corresponde a isso:

 

Código original

<!-- Right Column -->

<div class="w3-twothird">

&nbsp;

<div class="w3-container w3-card w3-white w3-margin-bottom">

<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-suitcase fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Work Experience</h2>

<div class="w3-container">

<h5 class="w3-opacity"><b>Front End Developer / w3schools.com</b></h5>

<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Jan 2015 - <span class="w3-tag w3-teal w3-round">Current</span></h6>

<p>Lorem ipsum dolor sit amet. Praesentium magnam consectetur vel in deserunt aspernatur est reprehenderit sunt hic. Nulla tempora soluta ea et odio, unde doloremque repellendus iure, iste.</p>

<hr>

</div>

<div class="w3-container">

<h5 class="w3-opacity"><b>Web Developer / something.com</b></h5>

<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Mar 2012 - Dec 2014</h6>

<p>Consectetur adipisicing elit. Praesentium magnam consectetur vel in deserunt aspernatur est reprehenderit sunt hic. Nulla tempora soluta ea et odio, unde doloremque repellendus iure, iste.</p>

<hr>

</div>

<div class="w3-container">

<h5 class="w3-opacity"><b>Graphic Designer / designsomething.com</b></h5>

<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Jun 2010 - Mar 2012</h6>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p><br>

</div>

</div>

 

Código alterado:

<!-- Right Column -->

<div class="w3-twothird">

<?php

$raw_results2 = mysql_query("SELECT * FROM `candidatos` WHERE `NR_CPF_CANDIDATO`='$id' ORDER BY `NR_ANO_ELEICAO` DESC") or die(mysql_error());

&nbsp;

while($results2 = mysql_fetch_array($raw_results2)){

?>

&nbsp;

<div class="w3-container w3-card w3-white w3-margin-bottom">

<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-suitcase fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i><?php echo $results2['DS_ELEICAO']; ?></h2>

<div class="w3-container">

<h5 class="w3-opacity"><b>Cargo disputado: <?php echo $results2['DS_CARGO']; ?></b></h5>

<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Situação da candidatura - <span class="w3-tag w3-teal w3-round"><?php echo $results2['DS_SITUACAO_CANDIDATURA']; ?></span></h6>

<p><ul>Informações partidárias:

<li>Partido: <?php echo $results2['NR_PARTIDO']." - ".$results2['SG_PARTIDO']; ?></li>

<li>Coligação: <?php echo $results2['TX_COMPOSICAO_LEGENDA']." - ".$results2['NM_LEGENDA']; ?></li>

</ul></p>

<p>Resultado: <?php echo $results2['DS_SIT_TOT_TURNO']; ?>

<hr>

</div>

<?php

$sq_cand = $results2['SQ_CANDIDATO'];

}

?>

<div class="w3-container">

<h5 class="w3-opacity"><b>Relação de bens declarados</b></h5>

<?php

$raw_results3 = mysql_query("SELECT * FROM `bens` WHERE `SQ_CANDIDATO`='$sq_cand' ORDER BY `NR_ANO_ELEICAO` DESC") or die(mysql_error());

&nbsp;

echo "<table border=1>";

echo "<tr><td>Tipo de bem</td><td>Descrição</td><td>Valor do bem</td><td>Eleição</td></tr>";

$num_rows = mysql_num_rows($raw_results3);

if($num_rows>0){

&nbsp;

while($results3 = mysql_fetch_array($raw_results3)){

&nbsp;

&nbsp;

&nbsp;

&nbsp;

echo "<tr><td>".$results3['DS_TIPO_BEM_CANDIDATO']."</td><td>".$results3['DS_BEM_CANDIDATO']."</td><td>".$results3['VL_BEM']."</td><td>".$results3['DS_ELEICAO']."</td></tr>";

}

&nbsp;

&nbsp;

echo  "</table>";

}

else{

echo "<tr><td colspan=4> Não há bens declarados</td></tr>";

echo  "</table>";

echo "<p><br><br><br></p>";

}

$raw_results4 = mysql_query("SELECT `NR_ANO_ELEICAO`,SUM(`VL_BEM`) FROM bens WHERE `SQ_CANDIDATO`='$sq_cand' GROUP BY `NR_ANO_ELEICAO`")or die(mysql_error());

while($results4 = mysql_fetch_array($raw_results4)){

$nombre = number_format($results4['SUM(`VL_BEM`)'], 2, ',', ' ');

echo "<h3>Valor total do patrimônio: R$" . $nombre . "</h3>";

}

&nbsp;

?>

</div>

</div>

<!-- End Right Column -->

</div>

 

Vamos entender o que está acontecendo trecho por trecho:

 

<?php

      $raw_results2 = mysql_query(“SELECT * FROM `candidatos` WHERE `NR_CPF_CANDIDATO`=’$id’ ORDER BY `NR_ANO_ELEICAO` DESC”) or die(mysql_error());

 

while($results2 = mysql_fetch_array($raw_results2)){

  ?>

Nesse primeiro pedaço de código, fazemos uma nova busca na tabela candidatos pelas linhas cujo NR_CPF_CANDIDATO é igual ao do valor enviado pela URL organizado de forma descendente a partir do ano da eleição (ou seja, isso irá retornar os valores de todas as eleições que o candidato participou cujos dados estão na tabela e vai organizá-los da eleição mais recente para mais antiga.

 

Já a linha do while abre novamente um loop para que a execução se mantenha enquanto houve resultados.

 

Note que os nomes das variáveis (que começam sempre com $) mudaram, porque o uso da mesma variável anterior criaria um conflito.

 

Aí o código <?php echo $results2[‘DS_ELEICAO’]; ?> passa a exibir os resultados por coluna selecionada (a que consta dentro dos colchetes e entre aspas.

 

No trecho abaixo

 

<?php

        $sq_cand = $results2[‘SQ_CANDIDATO’];

      }

      ?>

Coletamos na tabela o valor do campo SQ_CANDIDATO, que vamos usar para a próxima busca, na tabela bens.

O parênteses encerra esse loop. Passamos então a realizar uma nova busca, na tabela bens, de forma a obter a relação de bens declarados pelo candidato. Segue o código:

 

          <h5 class=”w3-opacity”><b>Relação de bens declarados</b></h5>

          <?php

      $raw_results3 = mysql_query(“SELECT * FROM `bens` WHERE `SQ_CANDIDATO`=’$sq_cand’ ORDER BY `NR_ANO_ELEICAO` DESC”) or die(mysql_error());

// aqui temos a busca na tabela bens cujo campo SQ_CANDIDATO é igual ao do candidato organizadas por ano.

     

      echo “<table border=1>”;

    echo “<tr><td>Tipo de bem</td><td>Descrição</td><td>Valor do bem</td><td>Eleição</td></tr>”;

// Aqui construímos a tabela que irá exibir os resultados.

    $num_rows = mysql_num_rows($raw_results3);

//isso conta o número de linhas que correspondem ao resultado de busca.

  if($num_rows>0){

Esse loop if Analisa se o número de linhas é maior do que zero. Se for, ele executa a próxima parte do código:

 

while($results3 = mysql_fetch_array($raw_results3)){

//aqui começamos o loop while que irá executar o código enquanto houver resultados de busca.

 

echo “<tr><td>”.$results3[‘DS_TIPO_BEM_CANDIDATO’].”</td><td>”.$results3[‘DS_BEM_CANDIDATO’].”</td><td>”.$results3[‘VL_BEM’].”</td><td>”.$results3[‘DS_ELEICAO’].”</td></tr>”;

  }

// e aqui temos a exibição dos resultados dentro da tabela. O parênteses em vermelho marca o fim do loop while.

 

echo  “</table>”;

//aqui encerramos a tabela

}

//e esse parêntese encerra a primeira parte do loop if

 

else{ // se o número de linhas no resultado de busca for igual a zero, o código que passa a ser executado é esse abaixo

    echo “<tr><td colspan=4> Não há bens declarados</td></tr>”;

    echo  “</table>”;

    echo “<p><br><br><br></p>”;

// isso informa que o candidato não tem bens declarados

  } // e esse parêntese encerra essa parte do loop if.

 

$raw_results4 = mysql_query(“SELECT `NR_ANO_ELEICAO`,SUM(`VL_BEM`) FROM bens WHERE `SQ_CANDIDATO`=’$sq_cand’ GROUP BY `NR_ANO_ELEICAO`”)or die(mysql_error());

// essa nova busca faz a soma do valor dos bens do candidato por ano de eleição

 

while($results4 = mysql_fetch_array($raw_results4)){

//aqui o loop while novamente

  $nombre = number_format($results4[‘SUM(`VL_BEM`)’], 2, ‘,’, ‘ ‘);

// essa variável pega o resultado da soma e coloca no formato adequado

  echo “<h3>Valor total do patrimônio: R$” . $nombre . “</h3>”;

//por fim, esse código exibe o total da soma do patrimônio

} //e aqui encerramos esse loop while

 

?> //e o trecho de código php

 

A alteração do código se encerra aqui. Você pode apagar o restante do código que não for usado ou deixa-lo de forma a acomodar outras informações que queira incluir na página.

 

Pronto! Agora é só salvar o arquivo como candidato.php e colocar ele no servidor do Infinity free.

Abra o index.php no navegador. A partir de agora ao clicar nos links nos nomes dos candidatos fará abrir a página candidato.php com as informações do candidato do link, assim:

 

 

 

Categories: programação