Categorias
Introdução à Programação Web para Bioinformática: HTML, CSS, PHP & JavaScript

Projeto final

Capítulo 16

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.

Até o momento temos um protótipo funcional do nosso site. Agora é o momento para terminarmos nosso “projeto final”. Podemos dizer que nosso site ainda é uma versão alfa, pois ainda está em avaliação pela equipe de desenvolvedores (que no caso é formada apenas por mim).

Criando páginas HTML

Neste capítulo, faremos melhorias na versão alfa e disponibilizaremos a primeira versão beta. A versão beta é disponibilizada para que usuários possam testar. Vocês leitores serão os beta testers. Vocês também serão responsáveis por detectar falhas e propor melhorias. Após testarmos todas essas etapas, poderemos finalmente apresentar uma versão final.

Criando páginas dinâmicas

Peço que todos tentem realizar o projeto final. É claro que teremos várias versões diferentes, pois cada um terá sua visão (sua versão alfa particular). Tente fazer sua versão e busque a opinião de outros desenvolvedores Web.

Inserindo os textos iniciais

Na primeira página, completei todos os textos com versões do “Lorem ipsum”, um famoso texto em latim usado por desenvolvedores para testar a tipografia e o enquadramento dos textos. Agora chegou a hora de preencher nosso site com os textos corretos.

Aproveitei e corrigi os links do menu principal e rodapé. Por exemplo o link sobre deve apontar para a página ?i=sobre. Veja a tabela a seguir:

LinkHref
Página inicial<a href=”?i=home”>
Sobre<a href=”?i=sobre”>
Navegar<a href=”?i=navegar”>
Buscar/BLAST<a href=”?i=blast”>
Ajuda<a href=”#” data-toggle=”modal” data-target=”#help”>

Página de ajuda

Vamos agora construir um modal para substituir a página de ajuda. Vamos inserir o código no rodapé. Abra o arquivo “footer.php” e adicione:

<!-- MODAL HELP -->
<div class="modal fade" id="help" tabindex="-1" role="dialog" aria-labelledby="help">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Ajuda</h4>
      </div>
      <div class="modal-body">
        <p style="text-align:center"><img src="app/img/logo.svg" alt="logo betabase"></p><br>
        <p>Betabase é uma base de dados com todas as sequências e estruturas de beta-glicosidases
            disponíveis no PDB.</p>
          <p>Pressione <b>navegar</b> para obter uma lista de beta-glicosidases disponíveis. Para buscar
           novas sequências, clique no menu <b>BLAST</b>. Para mais informações, entre em contato com 
           <a href="http://twitter.com/diiegomariano">@diiegomariano</a>.
         </p><br>
         <p><label class="label label-default">Atualizado em:</label> 31 de maio, 2017</p>
       </div>
       <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</div>
<!-- FIM Modal -->

c16_s1.php | https://goo.gl/RLbLfi

Nas chamadas dos botões de ajuda, adicione:

<a href="#" data-toggle="modal" data-target="#help">Ajuda</a>

c16_s2.php | https://goo.gl/YCpocb

Melhorando a página Navegar com JavaScript

A visualização da página navegar está um pouco tumultuada e, podemos dizer que está até mesmo confusa. Podemos melhorar esses resultados agrupando as sequências. Observe como está a página atual: 

Vamos então modificar o código para que as sequências sejam carregadas sobre demanda. Vamos também agrupar as sequências por PDB. Seria interessante inserir uma imagem tridimensional da proteína usando 3Dmol. Veja como ficaria:

O PDB poderia ser baixado ao clicar no link com seu nome. Ao clicar no ícone da seção “Show PDB” chamaríamos o 3Dmol. Podemos também criar a opção de alterar as cores da estrutura secundária, além de carregar resíduos baseado na numeração.

O nome do organismo pode ser obtido diretamente no arquivo PDB. Por fim, as sequências poderiam ser exibidas como botões e seriam carregadas em modais sob demanda.

Buscando nome do organismo

Para buscar o nome do organismo vamos criar uma função com PHP. Essa função deve receber o nome do PDB e buscar a linha identifique a espécie. Analisando um arquivo PDB percebemos que a região que identifica o nome da espécie tem as palavras “ORGANISM_SCIENTIFIC” após o 11º caractere. Vamos usar a função substr para identificá-lo. Abra o arquivo “blast.php” e vamos modificá-lo.

Observe como ficou o começo do código:

<?php 
// Busca o nome de um organismo em um arquivo PDB
function buscaOrganismo($pdbid){
    $pdbid = strtolower($pdbid);
    $pdb = fopen("app/data/pdb/$pdbid.pdb","r");
    while(!feof($pdb)){
        $linha = fgets($pdb, 4096);
        $tipo = substr($linha, 11, 19);
        if($tipo === 'ORGANISM_SCIENTIFIC'){
            $organismo = substr($linha, 32);
            $organismo = str_replace(';','', $organismo);
        }
        if(isset($organismo)) break;
    }
    fclose ($pdb);
    return ucfirst(strtolower($organismo));
}
?>

Observe que ao identificar qual o organismo, imediatamente chamamos a cláusula break para interromper a varredura do arquivo. Isso melhora performance do nosso programa, uma vez que o nome do arquivo geralmente está identificado nas primeiras linhas, logo não há necessidade de percorrê-lo por completo.

Visualizando proteínas

A seguir criaremos funções para visualizar nossas proteínas usando 3Dmol. Para acessar a visualização de cada proteína, basta clicar sobre o ícone figura na coluna “Show PDB”.

Nosso script será criado usando JavaScript. Vamos reaproveitar algumas funções descritas na documentação oficial. Por padrão, a proteína será carregada como cartoon na cor espectro. Vamos implementar três funções que considerei interessante:

  • Alterar a cor da estrutura secundária;
  • Selecionar resíduos pela numeração e exibi-los como sticks;
  • Exibir nome do resíduo, seu número e nome do átomo quando clicado.

Observe a seguir o código-fonte. Não entraremos em detalhes sobre as funções, mas a seguir vamos demonstrar a ação de cada uma.

<script type="text/javascript">
var glviewer = null;
var labels = [];
var colorSS = function(viewer) {
        //colorir por cor secundaria
        var m = viewer.getModel();
        viewer.setStyle({},{cartoon:{}}); /* Cartoon */
        m.setColorByFunction({}, function(atom) {
            if(atom.ss == 'h') return "magenta";
            else if(atom.ss == 's') return "orange";
            else return "white";
        });
        viewer.render();
}
var atomcallback = function(atom, viewer) {
        if (atom.clickLabel === undefined
                || !atom.clickLabel instanceof $3Dmol.Label) {
            atom.clickLabel = viewer.addLabel(atom.resn + " " + atom.resi + " ("+ atom.elem + ")", {
                fontSize : 10,
                position : {
                    x : atom.x,
                    y : atom.y,
                    z : atom.z
                },
                backgroundColor: "black"
            });
            atom.clicked = true;
        }
        else {
            if (atom.clicked) {
                var newstyle = atom.clickLabel.getStyle();
                newstyle.backgroundColor = 0x66ccff;
                viewer.setLabelStyle(atom.clickLabel, newstyle);
                atom.clicked = !atom.clicked;
            }
            else {
                viewer.removeLabel(atom.clickLabel);
                delete atom.clickLabel;
                atom.clicked = false;
            }
        }
};
/* Lendo PDB */
function readPDB(id){
    var txt = "app/data/pdb/"+id+".pdb";
    $.post(txt, function(d) {
        moldata = data = d;
        /* Criando visualizacao*/
        glviewer = $3Dmol.createViewer("pdb_3d", {
            defaultcolors : $3Dmol.rasmolElementColors
        });
        /* Cor de fundo */
        glviewer.setBackgroundColor(0xffffff);
        receptorModel = m = glviewer.addModel(data, "pqr");
        /* Tipo de visualizacao */
        glviewer.setStyle({},{cartoon:{color:'spectrum'}}); /* Cartoon multi-color */
        glviewer.addSurface($3Dmol.SurfaceType, {opacity:0.1});   
        /* Nome dos átomos */
        atoms = m.selectedAtoms({});
        for ( var i in atoms) {
            var atom = atoms[i];
            atom.clickable = true;
            atom.callback = atomcallback;
        }
        glviewer.mapAtomProperties($3Dmol.applyPartialCharges);
        glviewer.zoomTo();
        glviewer.render();
    });
}
/* Seleciona por ID */
function selectID(glviewer){
    var resID = $('#sID').val();
    glviewer.setStyle({resi:resID},{stick:{colorscheme:'whiteCarbon'}}); 
    glviewer.render();
}
</script>

c16_s4.php | https://goo.gl/oC0RIR

Colorir por estrutura secundária

A função que colore por estrutura secundária é chamada pelo clique em um botão. Ela recebe como argumento o objeto armazenado na variável glviewer. Observe a implementação do botão de chamada:

<button class="btn btn-default" onclick="colorSS(glviewer);"> Colorir estrutura secundária</button>

c16_s5.php | https://goo.gl/K5LKuw

Agora observe o resultado:

Cor espectralCor por cadeia secundária

Selecionando resíduos

Implementou-se também um campo textual para busca de resíduos baseado no número do átomo. Observe a seguir a busca por um resíduo de posição 363. Ele será carregado como stick em todas as cadeias da proteína.

Observe a implementação no HTML:

<div class="input-group">
    <input type="text" placeholder="Buscar resíduo por ID" id="sID" class="form-control" onform="">
    <span class="input-group-btn">
        <button class="btn btn-default" type="button" onclick="selectID(glviewer)">Exibir</button>
    </span>
</div>

c16_s6.php | https://goo.gl/sYJtpN

Exibindo informações sobre resíduos

Para exibir informações sobre o resíduo basta clicar sobre qualquer átomo do resíduo.

Modal que carrega a visualização

Toda a visualização do 3Dmol é carregada em um modal. Observe a implementação do mesmo:

<!-- MODAL 1 -->
<div class="modal fade" id="pdb_modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Estrutura tridimensional</h4>
            </div>
            <div class="modal-body">
                <div id="pdb_3d" style="width: 800px; height: 400px; margin: 0; padding: 0; border: 0;"></div>
            </div>
            <div class="modal-footer">
                <div class="form-inline">
                    <button class="btn btn-default" onclick="colorSS(glviewer);">Colorir estrutura secundária</button>
                    <div class="input-group">
                        <input type="text" placeholder="Buscar resíduo por ID" id="sID" class="form-control" onform="">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button" onclick="selectID(glviewer)">Exibir</button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- FIM MODAL 1 -->

c16_s7.php | https://goo.gl/PCc3vw

Tabela Navegar

Após a declaração do modal, vamos carregar a tabela principal. Vamos exibir um contador, o código do PDB, o botão para carregar a visualização da proteína, o nome do organismo e as sequências organizadas por cadeia.

<!-- Primeira parte -->
<div id="main" class="center">
    <span style="color:#9bbd46">- NAVEGAR -</span>
    <h2>Explore nossa base de dados</h2>
</div>
<div id="navegar">
    <div class="container">

        <!-- Criando a tabela -->
        <table class="table table-condensed table-hover table-striped">
            <thead>
                <tr>
                    <th>#</th>
                    <th>PDB ID</th>
                    <th>Show PDB</th>
                    <th>Organismo de origem</th>                    
                    <th>Sequências</th>
                </tr>
            </thead>
            <tbody>

c16_s8.php | https://goo.gl/jVbz51

Preenchendo a tabela

Vamos abrir o arquivo e inserir um PDB em cada linha.

<?php 
// Abrir arquivo de sequencias 
$arquivo = file_get_contents("app/data/seq.fasta"); 
$fastas = explode(">",$arquivo); // particiona o array em fastas separados
array_shift($fastas); // remove primeiro elemento
$total_fastas = count($fastas);
$pdbid_anterior = "Nenhum";
$id = 0;
for($i = 0; $i < $total_fastas; $i++){
    $pdbid = substr($fastas[$i], 0, 4);
    $cadeia = substr($fastas[$i], 5, 1);
    $seq = substr($fastas[$i], 27);
    
    if($pdbid_anterior != $pdbid){
        $pdbid_anterior = $pdbid;
        $id++; // Soma #
        if ($id != 1){ 
            echo '</td></tr><tr>'; //Abre uma nova linha
        }
        else {
            echo '<tr>'; //Abre uma nova linha
        }
        echo '<td>'.$id.'</td>'; // Grava #
        echo '<td><a href="app/data/pdb/'.strtolower($pdbid).'.pdb">'.$pdbid.'</a></td>'; // Grava pdbid
        echo '<td><a data-toggle="modal" onclick="readPDB(\''.strtolower($pdbid).'\');" data-target="#pdb_modal"><span class="glyphicon glyphicon-picture" aria-hidden="true"></span></a>';
        echo '<td><i>'.buscaOrganismo($pdbid).'</i></td>'; // Busca nome do organismo
        echo '<td><button data-toggle="modal" data-target="#'.$pdbid.'_'.$cadeia.'" style="margin-left:5px" type="button" class="btn btn-default btn-xs" title="'.$pdbid.':'.$cadeia.'" 
        >'.$cadeia.'</button>';
        // MODAL 2
        echo '<div class="modal fade" id="'.$pdbid.'_'.$cadeia.'" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">'.$pdbid.':'.$cadeia.'</h4>
        </div>
        <div class="modal-body">
        <pre>'.$seq.'</pre>
        </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        
        </div>
        </div>
        </div>
        </div>';
        // FIM MODAL 2
    }
    else{
        echo '<button type="button" data-toggle="modal" data-target="#'.$pdbid.'_'.$cadeia.'" style="margin-left:5px" class="btn btn-default btn-xs" title="'.$pdbid.':'.$cadeia.'" 
        data-container="body" data-toggle="popover" data-placement="left" 
        data-content="'.$seq.'">'.$cadeia.'</button>';
        // MODAL 3
        echo '<div class="modal fade" id="'.$pdbid.'_'.$cadeia.'" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">'.$pdbid.':'.$cadeia.'</h4>
        </div>
        <div class="modal-body">
        <pre>'.$seq.'</pre>
        </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
        </div>
        </div>
        </div>';
        // FIM MODAL 3
    }
}
?>
</tbody>
</table>
</div>
</div>

c16_s9.php | https://goo.gl/sjvVZV

Observe que declaramos no código acima, o modal 2 e o modal 3. O modal 2 grava apenas a cadeia A, enquanto o modal 3 é responsável por carregar as demais cadeias quando presentes.

Agora compare a versão alfa com a versão beta. Obtivemos melhorias?

AntesDepois

Melhorando os resultados do BLAST com JavaScript

Na página BLAST, exibimos os resultados diretamente do formulário de resultados do BLAST. Nessa etapa, vamos “parsear” os resultados de BLAST e exibi-los parte a parte. Vamos também construir um gráfico que indica a porcentagem de identidade.

HTML da página BLAST (Buscar)

Mantenha a primeira e segunda partes do código HTML da página Navegar.

<!-- Primeira parte -->
<div id="main" class="center">
    <span style="color:#9bbd46">- BLAST -</span>
    <h2>Realize buscas usando a ferramenta BLAST</h2>
</div>
<!-- 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>

c16_s10.php | https://goo.gl/3EQBBZ

Agora vamos iniciar o processamento em PHP do formulário. Nesse ponto verificamos se o formulário foi ou não submetido. Após isso, criamos a tabela acrescentando os novos itens do cabeçalho.

<?php // Processamento em PHP
if(isset($_POST['submit'])){ ?>

<!-- Crie a tabela aqui -->
<table class="table table-condensed table-striped table-hover">
    <tr>
        <th>Identidade</th>
        <th style="text-align:center">Sequência query</th>
        <th>PDB Referência</th>
        <th>Organismo referência</th>
        <th>Identidade %</th>
        <th>Positivos %</th>
        <th>Gaps %</th>
        <th style="text-align:center">Alinhamento</th>
    </tr>

c16_s11.php | https://goo.gl/ojVEsR

Para cada resultado de BLAST vamos exibir um gráfico de porcentagem de identidade, um botão que carrega a sequência buscada, o PDB de referência, o organismo, a identidade, resultados positivos, gaps e o alinhamento. Entretanto, primeiro vamos compreender como é feito o processamento dos resultados de BLAST.

Processando a requisição do BLAST

A seguir processamos a requisição da busca do BLAST. Não se esqueça de criar os arquivos manualmente e dar permissão de escrita para o usuário do servidor web (www-data ou apache). Se não souber fazer isso, você pode (temporariamente) dar permissão a de leitura e escrita a todos. Cuidado ao fazer isso: isso gera uma vulnerabilidade no seu sistema!

Decidimos então fazer o download da ferramenta BLAST e rodá-la localmente. Para isso, a ferramenta “blastp” foi adicionada a uma pasta chamada “bin” localizada em “app” (não se esqueça de dar permissão de execução ao “blastp”).

<?php
$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_get_contents("app/data/results.txt");
$resultados = explode("> ",$arquivo); //alterado para linux
array_shift($resultados); //remove primeiro elemento
?>

c16_s12.php | https://goo.gl/TVOAzE

O blastp realizará uma busca da sequência enviada, gravada na variável $query, contra a base de dados do arquivo “seq.fasta”. Os resultados serão gravados em “result.txt”. BLAST possui resultados mais fáceis de serem parseados (como XML ou tabular), entretanto escolhemos a saída padrão para demonstrar o uso da função explode.

Inicialmente quebramos a sequência baseado no caractere “>” (no resultado do BLAST para MacOS foram usados outros caracteres). Depois removemos o primeiro elemento do novo array com a função array_shift.

A seguir criamos nosso primeiro modal: responsável exclusivamente por exibir a sequência usada como query.

<!-- MODAL 1: query -->
<div class="modal fade" id="query" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Sequência buscada (Query)</h4>
            </div>
            <div class="modal-body">
                <pre><?php echo $query; ?></pre>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- FIM MODAL -->

c16_s13.php | https://goo.gl/6xFoMF

Para cada resultado de BLAST extraímos as informações necessárias (o código a seguir foi testado com sucesso apenas no Linux):

<?php
foreach($resultados as $resultado){
    // Coletando dados usando apenas comando explode
    $aux2 = explode("|",$resultado);
    $aux3 = explode(":",$aux2[0]);
    $pdb_id = $aux3[0];
    $cadeia = $aux3[1]; 
    $aux4 = explode("Identities = ",$resultado);
    $aux5 = explode(" (",$aux4[1]);
    $identidade = $aux5[0];
    $aux6 = explode("), Positives = ",$aux5[1]);
    $positivos = $aux6[1];
    $aux7 = explode("), Gaps = ",$aux5[2]);
    $gaps = $aux7[1];
    $alinhamento = $resultado;
    $identidade = explode("/",$identidade);
    $positivos = explode("/",$positivos);
    $gaps = explode("/",$gaps);
    $porcentagem_identidade = (int)(100*$identidade[0]/$identidade[1]);
    $porcentagem_positivos = (int)(100*$positivos[0]/$positivos[1]);
    $porcentagem_gaps = (int)(100*$gaps[0]/$gaps[1]);
    if($porcentagem_identidade != 0){
        // $pdb_id
        // $cadeia
        // $identidade[0] / $identidade[1]
        // $positivos[0] / $positivos[1]
        // $gaps[0] / $gaps[1]
        // $alinhamento
        // Iniciando os prints
        echo "<tr>";
        //<th>Região coincidente</th>
            echo '<td><div class="progress"><div class="progress-bar progress-bar-success" role="progressbar" style="min-width:'.$porcentagem_identidade.'% ;"></div></div></td>';
            //<th>Sequência</th>                   
            echo '<td style="text-align:center"><a data-toggle="modal" data-target="#query" style="margin-left:5px" type="button" title="Query" 
            ><span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span></a>';
            //<th>PDB Referência</th>
            echo '<td><a title="Download PDB" alt="download pdb" href="app/data/pdb/'.strtolower($pdb_id).'.pdb">'.$pdb_id.':'.$cadeia.'</a></td>';
            //<th>Organismo referência</th>
            echo '<td><i>'.buscaOrganismo(strtolower($pdb_id)).'</i></td>';
            //<th>Identidade</th>
            echo '<td>'.$identidade[0].'/'.$identidade[1].' ('.$porcentagem_identidade.'%)</td>';
            //<th>Positivos</th>
            echo '<td>'.$positivos[0].'/'.$positivos[1].' ('.$porcentagem_positivos.'%)</td>';
            //<th>Gaps</th>
            echo '<td>'.$gaps[0].'/'.$gaps[1].' ('.$porcentagem_gaps.'%)</td>';
            //<th>Alinhamento</th>
            echo '<td style="text-align:center"><a data-toggle="modal" data-target="#alinhamento_'.$pdb_id.'_'.$cadeia.'" style="margin-left:5px" type="button" title="'.$pdbid.':'.$cadeia.'" 
            ><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a>';
            echo '</tr>';
            // MODAL 2: alinhamento
            echo '<div class="modal fade" id="alinhamento_'.$pdb_id.'_'.$cadeia.'" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
            <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
            </button>
            </div>
            <div class="modal-body">
            <pre>'.$alinhamento.'</pre>
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div></div></div>
            </div>';
            // FIM MODAL 2
        }
    }
    echo '</table>';
}
?>
</div>
</div>

c16_s14.php | https://goo.gl/z1MKlM

Um modal exibe a sequência usada nas buscas pela base de dados realizadas com BLAST.

A seguir, tem-se uma visualização dos resultados de alinhamento obtidos quando se clica na opção para visualizar o alinhamento.

Observe uma comparação entre a versão anterior e a nova versão da página BLAST.

AntesDepois

Espero que você tenha consegui obter um resultado parecido com a página exibida. Se não der certo, tente analisar o arquivo de resultado de BLAST e busque pelo caractere certo para usar como entrada no comando explode.

Teste se sua versão beta está aceitável e tente enviar para um servidor externo. Há diversas opções disponíveis gratuitamente na internet. Mostre seus resultados para outros usuários e veja a reação dos mesmos ao utilizar sua página. Peça por sugestões e críticas. Boa sorte!

Quer aprender mais? Conheça nossos cursos profissionalizantes à partir de R$19,99:

Livro Introdução à Programação para Web para Bioinformática: HTML, CSS, PHP & JavaScript

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 .

Por Diego Mariano

Doutor em Bioinformática pela Universidade Federal de Minas Gerais com atuação na área de ciência de dados e aprendizado de máquina aplicados ao aperfeiçoamento de enzimas usadas na produção de biocombustíveis. Mestre em Bioinformática, também pela UFMG, atuando na área de desenvolvimento de sistemas Web para montagem de genomas. Atualmente realiza estágio pós-doutoral no Departamento de Ciência da Computação da UFMG com foco em desenvolvimento de sistemas Web para Bioinformática, análise exploratória e visualização de dados. Tem conhecimentos nas linguagens: PHP, JavaScript, Python, R, Perl, HTML, CSS e SQL.