Este conteúdo faz parte do livro “Introdução à programação Web para a Bioinformática: HTML, CSS, PHP & JavaScript“. Você pode adquirir a versão impressa desse livro aqui ou a versão para Kindle aqui. Para nos citar, consulte este link.
Nos capítulos anteriores iniciamos um projeto prático para construção de um Website. Entretanto, até aquele momento, o site era estático. Neste capítulo aprenderemos a transformá-lo em um site dinâmico.
Criando o index.php
No diretório raiz crie um arquivo chamado “index.php”. Agora crie um diretório chamado “app” e mova todo conteúdo criado anteriormente para esse diretório. Acalme-se! Vamos destrinchar todo o site para torná-lo dinâmico.
Dentro da pasta “app”, crie uma nova pasta chamada “views” e crie cinco arquivos dentro: “header.php”, “home.php”, “navegar.php”, “blast.php” e “footer.php”.
| Atenção |
| Não estamos criando um modelo MVC. Estamos apenas modularizando o carregamento de páginas. Para saber mais sobre o modelo MVC pesquise sobre frameworks como Laravel, Codeigniter ou Zend. |
Abra o arquivo “index.html” e vamos editá-lo em três passos:
- Recorte o conteúdo desde a primeira linha até o final da tag </header> e cole no arquivo “app/views/header.php”;
- Recorte do conteúdo da div “main” até o início da div <footer> e cole no arquivo “app/views/home.php”;
- Recorte o conteúdo da div “footer” e o restante e cole na no arquivo “app/views/footer.php”.
No arquivo “index.html”, que deve estar vazio agora, escreva “Acesso negado.”. Agora copie esse arquivo e cole em cada pasta do site, com exceção da raiz. Isso irá garantir que ninguém tenha acesso à estrutura das suas pastas. Apenas um arquivo poderá dar esse acesso: “index.php”.
Agora vamos criar o arquivo “index.php”:
<?php
/* Site: Betabase
Autor: Diego Mariano
Data: 30 de maio, 2017 */
/* Define a página atual pela URL */
$pagina = 'home';
if(isset($_GET['i'])){
$pagina = addslashes($_GET['i']);
}
/* Carrega o header.php */
include 'app/views/header.php';
/* Carrega a página escolhida pelo usuário */
switch ($pagina) {
case 'navegar':
include 'app/views/navegar.php';
break;
case 'blast':
include 'app/views/blast.php';
break;
default:
include 'app/views/home.php';
break;
}
/* Carrega o footer.php */
include 'app/views/footer.php'; c9_s1.php | https://goo.gl/heO5v8
Agora carregue a página inicial e veja o que acontece:
Sim! Toda a formatação do site foi perdida, mas isso já era esperado. Você alterou o endereço das pastas, logo terá que referenciar isso nos arquivos. Então vamos lá:
Vá ao arquivo “header.php”. Esse arquivo está na pasta “app/views”, entretanto ele é carregado em “index.php” que está no diretório raiz. Então para ter acesso a imagens e folhas de estilo ele precisa acessar primeiro o diretório “app”. Em todos os links acrescente ao começo: “app/”. Por exemplo:
| Onde se lê: |
| <link rel=”stylesheet” href=”css/bootstrap.min.css”> |
| Troque por: |
| <link rel=”stylesheet” href=”app/css/bootstrap.min.css”> |
Repita o mesmo processo em “home.php” e “footer.php”. Se você fez tudo certo, seu site será carregado assim:
Se apareceu algo diferente, você provavelmente se esqueceu de alguma parte. Revise todo código-fonte se necessário.
Compreendendo a modularização
Na modularização do código, dividimos o carregamento da página em vários arquivos. O cabeçalho da página <head>, além do topo vão para o arquivo “header.php”. Essa parte é essencial e repete-se em todas as outras páginas. Logo, ela sempre deve ser carregada. O mesmo vale para “footer.php”, que carrega os scripts. O centro da página será a única parte a se alterar.
Para detectar qual é a página atual criamos uma variável chamada $pagina. Essa variável recebe inicialmente o valor “home”, pois queremos que ela carregue a página “home” inicialmente. A seguir, verificamos se na URL existe uma variável de nome $_GET[‘i’]. Observe que usamos a função addslashes(). Essa função é responsável por tratar caracteres especiais.
| Vamos entender como funciona a variável $_GET[‘i’] |
| Se o usuário digita http://localhost/seuSite (ou outro nome que você tenha dado), a variável $_GET[‘i’] não existe (a função isset avalia isso), logo página atual continua sendo a “home”. Se o usuário digita http://localhost/seuSite?i=blast, a variável $_GET[‘i’] tem o valor “blast”, logo $pagina recebe o valor “blast”. Observe que o nome “index.php” é omitido da URL. |
Se $_GET[‘i’] recebe algum valor, a variável $pagina também recebe o mesmo valor, e esse será validada em switch. Por exemplo, se $pagina recebeu o valor “blast”, o sistema fará a inclusão da página ‘app/views/blast.php’. Caso nenhum valor válido seja inserido, ele carregará “home.php”. Lembre-se que o navegador apenas lê a página “index.php”. Todas as outras são inseridas dentro dela dinamicamente.
Criando a página “Sobre”
Crie um arquivo chamado “sobre.php” no diretório “views”. Vamos reaproveitar o leiaute já criado e adicionar um texto e uma figura. Observe como ficará a página ao final:
Para isso, vamos inicialmente reaproveitar a estrutura da div main e inserir um texto centralizado. A div main adiciona uma margem superior e inferior de 50px. A classe “center”, descrita em “style.css”, aplica apenas um “text-align:center”. Um tom de verde é aplicado no primeiro título. Observe a primeira parte do código:
<div id="main" class="center">
<span style="color:#9bbd46">- SOBRE -</span>
<h2>Biocombustíveis de Segunda-Geração</h2>
</div>c9_s2.php | https://goo.gl/14TKpa
Logo abaixo, criamos uma div chamada “sobre” e inserimos os textos e figura. Observe o código-fonte:
<div id="sobre">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="app/img/j4.jpg" class="img-thumbnail img-responsive center" >
<p>Beta-glicosidases são enzimas importantes para produção de biocombustíveis de segunda geração.
Elas agem em parceria com endoglucanases e exoglucanases na conversão de celulose em glicose fermentável.
Entretanto, a maior parte das beta-glicosidases conhecidas é altamente inibida por glicose.</p>
<p>É descrito na literatura que enzimas beta-glicosidases com alta resistência a inibição por glicose são mais eficientes
para produção de biocombustíveis.</p>
<p>Nesta base de dados listamos todas as beta-glicosidases disponíveis no banco de dados PDB.
Listamos sequências e estruturas tridimensionais. Esperamos que os dados aqui apresentados possam ser úteis
na detecção de enzimas mais eficiêntes para produção de biocombustíveis de segunda geração.</p>
<p style="text-align:center"><a href="?i=navegar" class="btn btn-primary btn-lg">Conheça todas as sequências</a></p>
</div>
</div>
</div>
</div>
c9_s3.php | https://goo.gl/hDOScb
Para centralizar o conteúdo em uma coluna central usamos as classes “col-md-6 col-md-offset-3”. Nesse exemplo, dizemos que nossa div ocupará seis colunas, mas terá uma margem (offset) de três colunas para a borda lateral.
No arquivo “style.css” adicionamos as seguintes linhas para melhor formatar a div criada:
#sobre {margin: 50px 0; }
#sobre p { text-align: justify; color:#999; font-size: 18px; line-height: 1.8; padding-top:20px;}c9_s4.css | https://goo.gl/aFRF1W
O link final aponta para a página navegar, que será o próximo item que iremos criar.
Criando o página Navegar
No arquivo “navegar.php” vamos exibir todas as sequências para arquivos coletados e links para os arquivos PDB. Entretanto, antes precisamos preparar nossa base de dados.
Criando um banco de dados sem um SGDB
Decidimos anteriormente que nossa ferramenta faria buscas em uma sequência de PDBs e de suas sequências. Para isso, fomos no site do PDB (http://www.rcsb.org/), buscamos pelo código 3.2.1.21 (código de E.C. number das enzimas beta-glicosidases) e coletamos 160 estruturas tridimensionais no formato “.pdb” e as sequências fasta.
Como o objetivo deste livro não é abordar bancos de dados relacionais (por ser um assunto muito extenso), decidimos trabalhar diretamente com os arquivos coletados.
Para organizar os dados, criou-se uma pasta chamada “data” dentro de “app”. Em “data” adicionou-se o arquivo “seq.fasta” (com as sequências das estruturas no formato fasta) e a pasta pdb (com os arquivos PDB coletados). Para saber mais sobre o formato fasta e PDB leia os outros livros desta série.
Criando o arquivo navegar.php
Assim como na página “Sobre”, na primeira parte da página “Navegar” usamos a div main:
<!-- Primeira parte -->
<div id="main" class="center">
<span style="color:#9bbd46">- NAVEGAR -</span>
<h2>Explore nossa base de dados</h2>
</div>c9_s5.php | https://goo.gl/7kRThg
Na segunda parte, construímos uma tabela que:
- Exibia todas as sequências do arquivo seq.fasta;
- Exibia um link para baixar o pdb.
Na segunda parte, abrimos a div “#navegar” (insira no arquivo “style.css” uma margem de 50px no topo e no rodapé), que também é contida pela div “.container”. A seguir começamos a criar a tabela que iremos exibir os dados das nossas sequências e PDBs.
<!-- Segunda parte -->
<div id="navegar">
<div class="container">
<!-- Criando a tabela -->
<table class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th>#Seq</th>
<th>#PDB</th>
<th>PDB ID</th>
<th>Cadeia</th>
<th>Sequência</th>
<th>PDB download</th>
</tr>
</thead>
<tbody>
c9_s6.php | https://goo.gl/FyOx1c
A partir deste ponto temos que preencher a tabela. Preste atenção no código. Devemos mesclar código em PHP e HTML. Veja que abrimos a tabela antes de ler o arquivo “seq.fasta”. A seguir lemos o cabeçalho de cada para identificar os IDs. As linhas das sequências estão logo abaixo, então não se pode gravar uma linha na tabela até que todas as linhas dessa sequência tenham sido lidas. Por isso, uma linha só é gravada quando o caractere de iniciação de sequência (>) da linha de baixo for detectado.
<!-- Preenchendo a tabela -->
<?php
$arquivo = file("app/data/seq.fasta");
// Abrir arquivo de sequencias
array_push($arquivo,">");
// Permite que o ultimo elemento seja inserido
$pdbid_anterior = "";
$sid = 0; //numero da sequencia
$pid = 0; //numero do pdb
// Para cada linha do arquivo de sequencia
foreach($arquivo as $linha){
/* Se for o cabeçalho e diferente do anterior (salva uma unica cadeia)
for id = 0: CONDIÇÃO ESPECIAL */
if ($sid == 0){
// Detecta cabeçalho
if(substr($linha,0,1) == '>'){
$info = explode("|",$linha);
$pdb_cadeia = explode(":", $info[0]);
$pdb_id = substr($pdb_cadeia[0], 1);
$cadeia = $pdb_cadeia[1];
$seq_atual = "";
if($pdbid_anterior != $pdb_id){
$pdbid_anterior = $pdb_id;
$pid++;
}
$sid++;
}
else{
$seq_atual .= $linha;
}
}
else{
// Primeiro gravo toda a informação
if(substr($linha,0,1) == '>'){ ?>
<tr <?php if($cadeia == "A"){ echo 'class="success"'; }?>>
<td><?php echo $sid; ?></td>
<td><?php echo $pid; ?></td>
<td><?php echo $pdb_id; ?></td>
<td><?php echo $cadeia; ?></td>
<td><pre><?php echo $seq_atual; ?></pre></td>
<td style="text-align:center">
<a href="app/data/pdb/<?php echo strtolower($pdb_id); ?>.pdb">
<span class="glyphicon glyphicon-download" aria-hidden="true"></span>
</a>
</td>
</tr>
c9_s7.php | https://goo.gl/vfYvj9
Observe o sinal de @ antes em “@$cadeia = $pdb_cadeia[1];”, ele faz com que caso houver avisos nessa linha, eles não sejam exibidos na página HTML (o que atrapalharia o nosso leiaute) e sim no arquivo de erros e avisos do Apache.
Um arquivo PDB pode ter várias cadeias. Para marcar o início de uma nova cadeia inserimos uma classe que a grifa na cor verde em: if($cadeia == “A”){ echo ‘class=”success”‘; }. Ao final da tabela, ainda inserimos um link para que o usuário possa baixar o arquivo PDB.
Observe que, para forçar a gravação da última, após a abertura do arquivo fasta, inserimos um caractere “>” com a função array_push(). Isso dará ao código a necessidade de realizar mais um loop, apesar de não ter mais informações para inserir. Observe o resultado final:
Criando a página de buscas com BLAST
A página “blast.php” deve realizar uma busca baseado em uma sequência inicial, que chamaremos de query, na nossa base de dados de sequências, que chamaremos de subject.
Crie o arquivo “blast.php” e adicione a div main com o seguinte conteúdo:
<!-- Primeira parte -->
<div id="main" class="center">
<span style="color:#9bbd46">- BLAST -</span>
<h2>Realize buscas usando a ferramenta BLAST</h2>
</div>
c9_s8.php | https://goo.gl/5jSQz4
Antes de prosseguir para a próxima etapa é necessário checar se você tem a ferramenta BLAST instalada na sua máquina.
Para testar se o BLAST está instalado corretamente, abra o terminal/CMD e digite: “blastp”. Você deve receber como resultado a seguinte mensagem:
BLAST query/options error: Either a BLAST database or subject sequence(s) must be specified |
Isso indica que o BLAST está instalado.
Fazendo download do BLAST
Acesse a página do BLAST e faça o download da versão mais recente para seu sistema operacional: <ftp://ftp.ncbi.nlm.nih.gov/blast/executables/blast+/LATEST/>.
Caso tenha algum problema, verifique as soluções propostas nos outros livros desta série ou visite a página da suíte NCBI BLAST+: <https://blast.ncbi.nlm.nih.gov/Blast.cgi?PAGE_TYPE=BlastDocs&DOC_TYPE=Download>.
Construindo um formulário de buscas
Dentro do arquivo “blast.php” vamos construir a segunda parte. Nesta parte vamos criar um formulário de buscas que irá chamar a ferramenta BLAST. Vamos definir a possibilidade de uso um tipo do BLAST:
- blastp: recebe como entrada uma sequência de proteínas e busca por sequências de proteínas;
O formulário deve usar o método POST, uma vez que o método GET pode limitar o tamanho da busca, além de deixar amostra a query. Também deve processar todo o conteúdo na mesma página. Agora observe o código-fonte do formulário:
<!-- Segunda parte -->
<div id="blast">
<div class="container">
<form method="post" action="?i=blast&results">
<!-- Tipo de blast -->
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" name="tipo" value="p" autocomplete="off" title="BLAST PROTEIN -> PROTEIN" checked> blastp
</label>
</div>
<textarea name="query" class="form-control" placeholder="Insira a sequência aqui" rows="5"></textarea>
<p class="center">
<br>
<input type="submit" name="submit" value="Executar BLAST" class="btn btn-primary btn-lg">
</p>
c9_s10.php | https://goo.gl/f9tvo9
Processando os resultados da busca
Logo abaixo do formulário crie um campo PHP para que possamos processar a busca naquela mesma página. O mecanismo que irá ativar o processamento é a variável $_POST[‘submit’], criada quando o usuário clica em “Executar BLAST”.
<?php // Processamento em PHP
if(isset($_POST['submit'])){
$query = addslashes($_POST['query']);
$tipo = addslashes($_POST['tipo']);
if ($tipo == ‘p’) {
$programa = "blastp";
}
$tmp = fopen("app/data/tmp.fasta","w");
fwrite($tmp, ">Query\n".$query);
fclose($tmp);
//Executa blast
system("cd app/data && ../bin/$programa -query tmp.fasta -subject seq.fasta > results.txt");
echo "<h1>Resultados ($programa)</h1>";
$arquivo = file("app/data/results.txt");
echo "<pre>";
foreach($arquivo as $linha){
print $linha;
}
echo "</pre>";
}
?>
</div>
</div>
c9_s11.php | https://goo.gl/wX88u3
Observe que aplicamos a função addslashes() em todas as variáveis de entrada. É importante tratar a entrada de caracteres especiais recebidos por formulários. Também usamos um teste condicional switch para definir qual programa será usado (no momento só estamos usando blastp, mas podemos no futuro ampliar o suporte a outros programas da suíte NCBI BLAST+).
Após receber a sequência, BLAST só permite que uma busca seja feita se ela estiver gravada em um arquivo. É o que fazemos nas linhas:
<?php $tmp = fopen("app/data/tmp.fasta","w");
fwrite($tmp, ">Query\n".$query);
fclose($tmp);
c9_s12.php | https://goo.gl/VBYYRn
A sintaxe do blastp (BLAST protein) é:
blastp -query arquivo_query.fasta –subject base_dados.fasta > arquivo_saida.txtEntretanto, para utilizá-lo é necessário fazer algumas alterações. Primeiro, em PHP para usar programas externos podemos usar as funções system, shell_exec ou exec. Para executar o comando é necessário estar no diretório correto. Sabendo que iniciamos do mesmo diretório do arquivo “index.php”, temos que navegar até a pasta “app/data”. Podemos usar o comando “cd” para navegar e os operadores “&&” para combinar comandos em uma mesma linha. A seguir, BLAST é chamado. Mas lembre-se que é necessário digitar o endereço completo da localização do programa. Se você não sabe, vá até o terminal e digite “which blastp”, dependendo da versão desejada. Você também pode copiar o arquivo “blastp” e colá-los em um diretório chamado “bin” dentro de sua pasta “app”. Agora observe o exemplo abaixo e veja como blast é executado em nosso código:
<?php //Executa blast
system("cd app/data && ../bin/$programa -query tmp.fasta -subject seq.fasta > results.txt");
c9_s13.php | https://goo.gl/1YEx5o
Talvez seja necessário criar arquivos vazios para “tmp.fasta” e “results.txt” e dar-lhes permissão de leitura e escrita para todos (no Linux você usa o comando chmod; no Windows e MacOS basta apenas clicar com botão direito > propriedades > permissões). Os resultados então são lidos do arquivo “results.txt” e exibidos com a ajuda da tag <pre>, que pré-formata os dados usando uma fonte mono-espaçada. Agora escolha alguma sequência disponível na página “navegar” e faça a busca.
Nos próximos capítulos aprenderemos como melhorar essas visualizações usando JavaScript. Agora volte nos arquivos “header.php” e “footer.php” e corrija todos os links. Não se esqueça que mudamos o nome de algumas páginas, como por exemplo, “listar” que passou a ser “navegar”. A página de “ajuda” faremos depois que aprendermos a usar modais.
Se você deseja reproduzir os conteúdos, o código-fonte dessa primeira versão do projeto final está disponível em: <https://github.com/dcbmariano/betabase_alfa>.
Quer aprender mais? Conheça nossos cursos profissionalizantes à partir de R$19,99:
Capítulo 1
Introdução ao HTML
Capítulo 2
Fundamentos do HTML
Capítulo 3
Estrutura de páginas
Capítulo 4
Folhas de Estilo em Cascata (CSS)
Capítulo 5
Bootstrap
Capítulo 6
Iniciando a construção de um Website
Capítulo 7
Introdução ao PHP
Capítulo 8
Fundamentos do PHP
Capítulo 9
Transformando um Website em dinâmico
Capítulo 10
Introdução ao JavaScript
Capítulo 11
Fundamentos do JavaScript
Capítulo 12
jQuery
Capítulo 13
Bootstrap JavaScript
Capítulo 14
D3.js
Capítulo 15
3Dmol
Capítulo 16
Projeto Final
Epílogo
Referências Bibliográficas
Cite:
MARIANO, DIEGO; de MELO-MINARDI, R. C. . Introdução à Programação Web para Bioinformática: HTML, CSS, PHP & JavaScript. 1. ed. North Charleston, SC (EUA): CreateSpace Independent Publishing Platform, 2017. v. 3. ISBN: 978-1520895154; 403p .
Uma resposta em “Transformando um website em dinâmico”
[…] https://diegomariano.com/transformando-um-website-em-dinamico/ […]