Nesse tutorial vamos aprender a criar uma tabela de exibição dinâmica dos jogos da Copa do Mundo. E a exibir dados sobre cada seleção na lista de partidas. Para isso vamos unir o PHP com MySQL e um pouco de Javascript. Se você chegou no tutorial aqui, mas está perdido, sugiro dar um pulinho nos nossos tutoriais 1, 2 e 3.

Muito bem, aqui também vamos, a exemplo do tutorial 3, usar um código pronto e alterar as informações para fazê-lo trabalhar como queremos. Você pode baixar o projeto inteiro aqui: copa2. É necessário também salvar no seu computador as duas tabelas MySQL que vamos usar, a de jogos e a de times. Estão aqui: tabelas.

Vamos trabalhar na seguinte ordem:

  1. Vamos criar as tabelas no nosso banco de dados
  2. Vamos colocar nossas credenciais do banco de dados nas conexões do código.
  3. Salvaremos todos os arquivos no nosso servidor
  4. Voilá: só entrar na URL e testar

Abra o Painel de Controle do seu servidor InfinityFree antes de mais nada. Você vai precisar bastante dele.

Criando as tabelas

Para criar nosso aplicativo vamos ter que criar no banco de dados MySQL duas tabelas. Uma de jogos da copa e outra dos times, com informações sobre o desempenho de cada seleção. Os dados estão salvos no formato sql no arquivo tabelas. Uma vez que você tenha baixado e salvo o arquivo, descompacte-o.

Dois arquivos estão dentro da pasta: jogos.sql e times.sql. Tudo que você precisa fazer é importá-lo para o banco de dados através do MySQL exatamente como fez com os arquivos CSV nos outros tutoriais.

Tela de importação de arquivos do MySQL.

Selecione o arquivo desejado e clique em executar. A importação de arquivos SQL, que são já no padrão do banco de dados, costuma dar menos problemas que a de outros formatos.

Repita o procedimento com o segundo arquivo.

No fim, você terá uma tabela jogos com 64 itens e uma tabela times com 33 itens.

Configurando a conexão

Ao descompactar a pasta copa2.zip você terá em mãos três arquivos:

  • index.php: página principal do aplicativo
  • getteams.php: código de exibição da tabela de jogos
  • getteams2.php: código de exibição dos detalhes por time

Para fazer o código conseguir consultar os dados das tabelas que você acabou de criar é preciso salvar suas credenciais nos arquivos. Abra getteams.php e getteams2.php. E edite a seguinte linha:

$con = mysqli_connect('host','usuario','senha','nome_do_banco');

Relembrando: host é o servidor do seu banco de dados, usuário é seu usuário do banco. Substitua o texto pelos valores corretos para a sua conexão, tendo cuidado para manter as aspas.

Lembre-se que é preciso alterar esses valores nos dois arquivos.

Daí é só salvar ambos e pronto.

App no ar

Para colocar o programa no ar, vá no Painel de Controle do seu servidor e acesse o Online File Manager. Dentro da pasta htdocs, crie uma pasta chamada copa. Salve os três arquivos dentro dessa nova pasta.

Uma vez salvos lá, a url http://seuendereço/copa irá exibir algo assim:

Página principal

Abra no seu editor de códigos (eu recomendo o Sublime Text) os três os arquivos. Vamos dar uma olhada neles.

No index.php temos o seguinte código:

<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","getteams.php?q="+str,true);
xmlhttp.send();
}
}
</script>

Esse trecho de código é um javascript e serve para tornar o carregamento dos dados do banco de dados mais dinâmico. Ele lê a ação do usuário na caixa select e carrega as informações da consulta no MySQL na div txtHint.

O código abre dentro da div as informações do arquivo getteams.php filtrados pelo valor selecionado na caixa de seleção. O trecho de código que chama a página php é esse aqui: xmlhttp.open(“GET”,”getteams.php?q=”+str,true);

Quando o usuário escolhe uma fase, o sistema exibe os jogos da etapa:

Tabela da fase escolhida pelo usuário.

No arquivo getteams.php, a parte do código que constrói a tabela também determina um link para cada time nesse trecho:

while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['Date'] . "</td>";
echo "<td>" . $row['Location'] . "</td>";
echo "<td><a href='http://copaup.epizy.com/copa/getteams2.php?p=";
echo $row['Home Team'];
echo "'>" . $row['Home Team'] . "</a></td>";
echo "<td><a href='http://copaup.epizy.com/copa/getteams2.php?p="; //trecho com a url do link
echo $row['Away Team']; //link pro nome do time
echo "'>" . $row['Away Team'] . "</a></td>";
echo "<td>" . $row['Result'] . "</td>";
echo "</tr>";
}

Não esqueça de trocar os links http://copaup.epizy.com do código original para a sua url. Esse endereço aparece duas vezes no trecho acima. É só alterar.

Isso faz com que o nome do time tenha um link para a página que exibe os detalhes da participação da seleção em copas:

Página de detalhes da participação da seleção em copas do mundo.

Todas as informações exibidas estão na tabela que criamos no nosso banco de dados.

Pronto! Seu aplicativo da tabela da Copa está pronto. Veja o exemplo do aplicativo em funcionamento aqui.

Categories: programação