Essa é a primeira parte do tutorial para quem quer criar um aplicativo web interativo com base numa base de dados. Aqui nós vamos:

  1. criar uma conta de hospedagem no Infinityfree.
  2. criar um banco de dados MySQL.
  3. criar e inserir dados numa tabela do banco de dados.
  4. criar um formulário simples de busca dos dados da tabela criada.

1. Criando uma conta de hospedagem gratuita

Para poder realizar nosso pequeno projeto precisamos de uma hospedagem com suporte para PHP e MySQL. Você pode contratar esse serviço junto a inúmeros provedores populares, como o Goddady. Mas como esse tutorial tem finalidade educativa, a opção que vamos usar aqui é gratuita: o Infinityfree.net.

Primeiro você deve acessar o site da Infinity.

Clique em Sign Up Now, informe seu email, a senha e repita a senha. Um email será enviado para você poder confirmar que é proprietário do endereço.

Depois que o email for confirmado, faça o login. Na nova tela irá aparecer a opção para você criar uma nova conta de hospedagem. Clique em + New Account.

Na próxima tela você precisará criar um subdomínio, ou seja, um endereço para seu site na internet. (Dá para usar um domínio próprio também, mas isso tem custo). Crie um subdomínio que não tem caracteres especiais.

Depois de confirmar o subdomínio você será chamado a criar um label para a nova conta (um rótulo, ou seja, um nome). E também vai receber uma senha (que pode ser mudada). É essa senha que você vai usar mais para frente para se conectar ao seu servidor de banco de dados MySQL. Ou seja, salve-a.

Note que esse subdomínio e o domínio da Infinity vão compor a URL do seu site no formato: seusubdominio.epizy.com.

Com a conta e o subdomínio confirmados, você está pronto para acessar o Control Panel, que é a central de controle do seu site. Já na Client Area você poderá recuperar os dados da conta ou criar novas contas de hospedagem.

Pronto! Sua conta está ativa!

2. Crie seu banco de dados MySQL

Com a conta já configurada é hora de criar seu banco de dados MySQL. No CPanel, clique em MySQL Databases.

Uma página será aberta com um formulário para que você crie seu banco de dados e gerencie os já existentes.

Digite o nome do seu novo banco de dados no formulário e clique e Create Database. Lembre-se de criar um nome sem caracteres especiais ou espaços. E lembre-se que letras maiúsculas e minúsculas não são iguais.

Uma vez criado o banco de dados, ele irá aparecer na sua lista de bancos com as credenciais:

Ao clicar no botão Admin, o sistema irá abrir o PHPMyAdmin, um administrador online do banco de dados que irá permitir que você consulte e edite seus dados. A tela de abertura do PHPMyAdmin deverá ser assim:

3. Como criar e inserir dados numa tabela MySQL

Seu banco de dados está criado, mas não há nada nele. Então vamos utilizar o arquivo CSV up para criar uma tabela com os dados dos alunos do curso de jornalismo da UP. Faça o download do arquivo, descompacte-o e vá para a página inicial do PHPMyAdmin. Clique em Importar.

Na nova tela você irá selecionar o arquivo para importação.

Assim que o sistema detectar que se trata-se de um arquivo csv, vai disponibilizar as opções para esse caso. Vamos utilizar o arquivo xaa.csv criado a partir da divisão do arquivo up.csv usando nosso tutorial para dividir arquivos csv grandes em porções menores via terminal.

Apesar do MySQL aceitar arquivos até 300Mb, é comum que o upload dê erro. Então dividir o arquivo em pedaços menores agiliza o processo e reduz os erros.

Na janela de opções, você terá que marcar a opção “A primeira linha do arquivo contém os nomes das colunas da tabela”. E trocar o separador de coluna de “,” para “|” (ou o separador do arquivo que você estiver utilizando, caso não esteja usando o nosso).

No fim da importação você terá uma tabela com 2.124 linhas. Depois de criada a tabela a partir do primeiro arquivo, é só ir adicionando os demais. A diferença é que eles não terão mais os rótulos de coluna.

Só que nas próximas importações você irá mudar o item formato de CSV para CSV usando LOAD DATA:

No fim você terá uma tabela com 23864 registros.

 

4. Criando uma página de busca para os dados criados

Agora que temos nosso banco de dados e a tabela com informações sobre os alunos de jornalismo da Universidade Positivo, vamos criar um formulário simples de busca. É o primeiro passo para integrar a ação no site com o banco de dados.

Primeiro, vamos criar um arquivo index.php. Observe os comentários para saber o que cada trecho de código faz.

Note que o que está depois das barras duplas (// e do <!-- -->) são comentários, ou seja, texto que incluímos no código para explicar ele. Os comentários são ignorados pelo computador, mas muito úteis para os humanos entenderem os códigos que escreveram ou o de outros/as programadores/as.
 <!-- Esta é a página com o formulário de pesquisa. -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Busca</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<form action="search.php" method="GET">
<input type="text" name="query" />
<input type="submit" value="Busca" />
</form> 

</body>
</html> 

O segundo arquivo que vamos criar se chama search.php e irá fazer a ligação entre o banco de dados e a página web.

A primeira parte do código irá se conectar com o banco de dados.

</pre>
<?php
mysql_connect("localhost", "root", "") or die("Error connecting to database: ".mysql_error());
/*
mysql_connect("localhost", "root", "")
localhost - servidor do seu banco de dados MySQL
root - o seu usuário
o terceiro item é a sua senha (no caso do infinityfree.net, essa é a senha da conta do teu subdomínio)

se a conexão não funcionar a página exibirá uma mensagem de erro
*/

mysql_select_db("database") or die(mysql_error());
/* nome do banco de dados que você criou */
?>
<pre>

Note que você irá precisar aqui das suas credenciais do banco de dados, que estão disponíveis no CPanel do servidor.

A segunda parte do arquivo é a estrutura HTML padrão que irá receber os resultados da busca. Note que o local onde a terceira parte do código irá ser inserida está marcada no documento.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Resultados da busca</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>

<!-- Aqui vamos inserir o código PHP que irá coletar e exibir os resultados da busca -->

</body>
</html>

Por fim, é hora do PHP coletar e exibir os resultados. Para isso primeiro vamos coletar o termo de busca inserido no formulário. Depois vamos utilizar esse termo numa consulta ao banco:

"SELECT * FROM alunos
WHERE (`NO_CURSO` LIKE '%".$query."%') OR (`DS_TURNO_ALUNO` LIKE '%".$query."%')"

Então, vamos coletar os resultados obtidos (ou seja, as linhas da tabela que correspondem a busca realizada e exibi-los na página.

 

<?php
$query = $_GET['query']; 
// pega o termo enviado via formulário

$min_length = 3;
// você pode definir um tamanho mínimo para o termo de busca

if(strlen($query) >= $min_length){ // se o termo de busca for menor que o limite

$query = htmlspecialchars($query); 
// muda os caracteres usados pelo HTML

$query = mysql_real_escape_string($query);
// evite que usem o formulário para fazer SQL injection (um tipo de invasão de sistema)

$raw_results = mysql_query("SELECT * FROM alunos
WHERE (`NO_CURSO` LIKE '%".$query."%') OR (`DS_TURNO_ALUNO` LIKE '%".$query."%')") or die(mysql_error());

// * significa que você está selecionando todos os campos. Você também pode listar os campos que quer escrevendo: `id`, `NO_CURSO`, `DS_TURNO_ALUNO` etc
// alunos é o nome da sua tabela

// '%$query%' é o que estamos buscando, % significa tudo. Por exemplo, se a $query é Hello
// a busca irá encontrar "hello", "Hello man", "gogohello". Se você quer uma busca do termo exato, use `title`='$query'
// ou se você quer encontrar apenas a palavra inteira então use '% $query %' ...ou ... '$query %' ... ou ... '% $query'

if(mysql_num_rows($raw_results) > 0){ // se a resposta tem uma ou mais linhas

while($results = mysql_fetch_array($raw_results)){
// $results = mysql_fetch_array($raw_results) coloca os resultados numa array

echo "<p><h3>".$results['NO_CURSO']."</h3>".$results['DS_TURNO_ALUNO']."</p>";
// publica os resultados da busca
}

}
else{ // se a busca não encontrou nada
echo "Não encontramos resultados";
}

}
else{ // se o termo de busca tem menos caracteres que o mínimo
echo "Sua busca precisa ter pelo menos ".$min_length."caracteres";
}
?>

Pronto, agora que suas duas páginas estão prontas, é só salvá-las no servidor. Os dois arquivos devem ser salvos no diretório raiz do seu servidor. No Infinityfree, você pode fazer isso utilizando o Online File Manager. O link para ele está na primeira página do CPanel:

Online File Manager no CPanel
Link para o Online File Manager no CPanel.

Quando você entrar no File Manager, vai encontrar o primeiro diretório do seu servidor, mas que não é ainda o raiz onde deverá salvar os arquivos do site:

O raiz é o diretório htdocs. É lá que seu index.php e search.php deverão ficar.

Quando os dois arquivos estiverem salvos nesse diretório, a sua página ficará visível no subdomínio que você configurou. No meu caso, a página está disponível em copaup.epizy.com.

 

Tags: