corner imagecorner image
IDEPlatformPluginsDocs & SupportCommunityPartners

Criando uma aplicação Web simples usando um banco de dados MySQL

Escrito por Troy Giunipero

Este documento descreve como criar uma aplicação Web simples que se conecta ao servidor de banco de dados MySQL. Também aborda algumas ideias e tecnologias básicas em desenvolvimento da Web, como páginas JavaServer (JSP), Biblioteca de marcações padrão de páginas JavaServer (JSTL), a API Conectividade de banco de dados Java (JDBC) e duas camadas, arquitetura de servidor do cliente. Este tutorial está destinado a iniciantes com conhecimento básico em desenvolvimento Web e que gostariam de utilizar seu conhecimento com o banco de dados MySQL.

O MySQL é um sistema de gerenciamento de banco de dados de código-fonte aberto popular geralmente utilizado em aplicativos da Web devido à sua velocidade, flexibilidade e confiabilidade. O MySQL emprega a linguagem SQL, ou Structured Query Language, para acessar e processar os dados contidos em bancos de dados.

Este tutorial é a continuação do tutorial Conectando a um banco de dados MySQL e pressupõe que um banco de dados MySQL denominado MyNewDatabase já tenha sido criado, para o qual você registrou uma conexão no NetBeans IDE. Os dados de tabela usados em tal tutorial estão em ifpwafcad.sql e também são necessários para este tutorial. Este arquivo SQL cria duas tabelas, Subject e Counselor, a seguir, preenche-as com os dados de amostra. Se necessário, salve este arquivo no seu computador, a seguir, abra-o no NetBeans IDE e execute-o no banco de dados MySQL denominado MyNewDatabase.

Conteúdo

O conteúdo desta página se aplica ao NetBeans IDE 6.8, 6.9. 7.0 e 7.1

Para seguir este tutorial, você precisa dos seguintes recursos e softwares.

Software ou recurso Versão necessária
NetBeans IDE conjunto 6.8, 6.9, 7.0, 7.1, Java EE
Java Development Kit (JDK) 6
Servidor de banco de dados MySQL 5.x
Conector MySQL/driver J JDBC versão 5.x
GlassFish Server Open Source Edition 3.x

Observações:

  • O pacote de download do Java do NetBeans IDE permite instalar o servidor do GlassFish. Você precisa do GlassFish server para trabalhar neste tutorial.
  • O conector MySQL/driver J JDBC, necessário para a comunicação entre as plataformas Java e o protocolo do banco de dados MySQL, está incluído no NetBeans IDE.
  • Se você precisar comparar seu projeto com uma solução que funciona, baixe o aplicativo de amostra.

Planejando a estrutura

Aplicativos da Web simples podem ser projetados utilizando uma arquitetura de duas camadas, na qual um cliente se comunica diretamente com um servidor. Neste tutorial, um aplicativo da Web Java se comunica diretamente com um banco de dados MySQL utilizando a API de conectividade do banco de dados Java. Em essência, é o conector MySQL/driver J JDBC que permite a comunicação entre o código Java entendido pelo servidor do aplicativo (o servidor GlassFish) e qualquer conteúdo no SQL, a linguagem entendida pelo servidor do banco de dados (MySQL).

O aplicativo construído neste tutorial envolve a criação de duas páginas JSP. Em cada uma dessas páginas, você utiliza HTML e CSS para implementar uma interface simples e aplica tecnologia JSTL para executar a lógica que consulta diretamente o banco de dados e insere os dados recuperados nas duas páginas. As duas tabelas do banco de dados, Sujeito e Conselheiro, estão contidas no banco de dados MySQL, MyNewDatabase, criado com a conclusão do tutorial Conectando ao banco de dados MySQL. Considere o cenário de duas camadas a seguir.

Diagrama que representa a estrutura de uma aplicação Web de duas camadas

A página de boas-vindas (index.jsp) apresenta ao usuário um formulário HTML simples. Quando um navegador requere index.jsp, o código JSTL da página inicia a consulta em MyNewDatabase. Ele recupera dados da tabela do banco de dados Sujeito e os insere na página, antes de eles serem enviados para o navegador. Quando o usuário submete sua seleção no formulário HTML da página de boas-vindas, a submissão inicia uma requisição para a página de resposta (response.jsp). Novamente, o código JSTL da página inicia uma consulta em MyNewDatabase. Neste momento, ele recupera dados das tabelas Sujeito e Conselheiro e os insere na página, permitindo que o usuário visualize os dados com base na sua seleção quando a página é retornada para o navegador.

Para implementar o cenário descrito acima, você desenvolve um aplicativo simples para uma organização fictícia denominada IFPWAFCAD, Associação internacional de ex-lutadores profissionais para aconselhamento e desenvolvimento.

index.jsp

index.jsp em um navegador

response.jsp

response.jsp exibido em um navegador

Criando um novo projeto

Comece criando um novo projeto da Web Java no IDE:

  1. Escolha Arquivo > Novo projeto (Ctrl-Shift-N; &#8984-Shift-N no Mac) no menu principal. Selecione a categoria Java Web e Aplicativo da Web. Clique em Próximo.
    Assistente Novo projeto

    O assistente Novo projeto permite criar um aplicativo da Web vazio em um projeto IDE padrão. O projeto padrão utiliza um script de construção Ant gerado pelo IDE para compilar, implantar e executar o aplicativo.

  2. Em Nome do projeto, insira IFPWAFCAD. Além disso, especifique o local para o projeto no computador. (Por padrão, o IDE coloca projetos em uma pastaNetBeansProjects localizada no diretório Home). Clique em Próximo.
  3. No painel Servidor e configurações, especifique o servidor GlassFish como o servidor que será utilizado para executar o aplicativo.

    Observação. O servidor GlassFish é exibido no campo suspenso Servidor se você tiver instalado a versão Java do NetBeans IDE. Como o servidor GlassFish está incluído no download, ele é automaticamente registrado no IDE. Se desejar utilizar um servidor diferente para esse projeto, clique no botão Adicionar localizado ao lado do campo suspenso Servidor e registre um servidor diferente no IDE. No entanto, trabalhar com servidores que não o GlassFish está além do escopo deste tutorial.

  4. No campo Versão do Java EE, selecione Java EE 5.
    Assistente Novo aplicativo da Web: Servidor e configurações

    Os projetos Web Java EE 6 não exigem o uso do descritor de deployment web.xml e o modelo de projeto do NetBeans não inclui o arquivo web.xml em projetos Java EE 6. No entanto, este tutorial demonstra como declarar uma fonte de dados no descritor de deployment e não conta com nenhum recurso específico do Java EE 6, portanto, é possível definir a versão do projeto como Java EE 5.

    Observação. Seria possível definir, igualmente, a versão do projeto como Java EE 6 e criar, em seguida, um descritor de implementação web.xml. (No assistente Novo arquivo, selecione a categoria Web e, em seguida, Descritor de deployment padrão).

  5. Clique em Terminar. O IDE cria um modelo de projeto para todo o aplicativo e abre uma página JSP vazia (index.jsp) no editor. O arquivo index.jsp serve como página de boas-vindas do aplicativo. O novo projeto está estruturado de acordo com as diretrizes do Java BluePrints da Sun.

Preparando a interface da Web

Comece preparando as páginas de boas-vindas (index.jsp) e de resposta (response.jsp). A página de boas-vindas implementa um formulário HTML que é utilizado para capturar dados do usuário. As duas páginas implementam uma tabela HTML para exibir os dados de forma estruturada. Nesta seção, você também cria uma folha de estilo que melhora a aparência das duas páginas.

Configurando a página de boas-vindas

Certifique-se de que index.jsp esteja aberto no editor. Se ainda estiver aberto, clique duas vezes no index.jsp em IFPWAFCAD > Páginas Web na janela Projetos.

  1. No editor, altere o texto entre as marcações <title> para Homepage da IFPWAFCAD.
  2. Altere o texto entre as marcações <h1> para: Bem-vindo à IFPWAFCAD, a Associação internacional de ex-lutadores profissionais para aconselhamento e desenvolvimento!.
  3. Abra a Paleta do IDE escolhendo Janela > Paleta (Ctrl-Shift-8; &#8984-Shift-8 no Mac) no menu principal. Coloque o ponteiro do mouse sobre o ícone Tabela na categoria HTML e observe que o trecho de código padrão do item é exibido.
    Paleta exibindo o trecho de código ao colocar o ponteiro do mouse sobre um item
    Você pode configurar a Paleta conforme desejar: clique com o botão direito do mouse na Paleta e escolha Mostrar ícones grandes e Ocultar nomes dos itens para que ela seja exibida como na imagem acima.
  4. Coloque o cursor em um ponto logo depois das marcações <h1>. (É aí que você deseja implementar a nova tabela HTML.) Em seguida, na Paleta, clique duas vezes no ícone Tabela.
  5. Na caixa de diálogo Inserir tabela exibida, especifique os seguintes valores e clique em OK:

    • Linhas: 2
    • Colunas: 1
    • Tamanho da borda: 0
    O código da tabela HTML é gerado e adicionado a sua página.
  6. Adicione o conteúdo a seguir ao cabeçalho da tabela e à célula da primeira linha da tabela (novo conteúdo mostrado em negrito): 
    <table border="0">
    <thead>
        <tr>
            <th>IFPWAFCAD offers expert counseling in a wide range of fields.</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>To view the contact details of an IFPWAFCAD certified former
                professional wrestler in your area, select a subject below:
            </td>
        </tr>
  7. Para a linha inferior da tabela, insira um formulário HTML. Para isso, coloque o cursor entre o segundo par de marcações <td> e, em seguida, clique duas vezes no ícone do formulário HTML ( ícone do formulário HTML ) na Paleta. Na caixa de diálogo Inserir formulário, digite response.jsp no campo Texto da ação e, em seguida, clique em OK.
    Caixa de diálogo Inserir formulário
  8. Digite o conteúdo a seguir entre as marcações <form> (novo conteúdo em negrito): 
    <tr>
    <td>
        <form action="response.jsp">
            <strong>Select a subject:</strong>
        </form>
    </td>
</tr>
    Todos os itens listados na Paleta podem ser igualmente acessados utilizando o suporte autocompletar de código do IDE. Para aproveitar o autocompletar de código ao trabalhar no editor, pressione Ctrl-Espaço. As duas etapas a seguir demonstram como adicionar uma lista suspensa e o botão Submeter utilizando o autocompletar de código.
  9. No editor, pressione Enter para adicionar uma linha vazia depois do conteúdo que acabou de adicionar e pressione Ctrl-Espaço para chamar o suporte autocompletar de código do IDE.
    Janela pop-up de autocompletar de código
    Selecione Lista suspensa.
  10. Na caixa de diálogo Inserir lista suspensa exibida, digite subject_id no campo de texto Nome e clique em OK. Note que o trecho de código da lista suspensa é adicionado ao formulário.

    O número de opções da lista suspensa não é importante no momento. Mais adiante neste tutorial, você adicionará marcações JSTL que geram dinamicamente as opções com base nos dados coletados da tabela do banco de dados Subject.
  11. Adicione um item botão Submeter ( Ícone do botão Submeter ) a um ponto logo depois da lista suspensa que você acabou de adicionar. É possível utilizar a Paleta para fazer isso ou chamar o autocompletar de código do editor, conforme ilustrado na etapa anterior. Na caixa de diálogo Inserir botão, insira submit nos campos de texto Nome e Rótulo e clique em OK.
  12. Para formatar seu código, clique com o botão direito do mouse no editor e escolha Formatar (Alt-Shift-F; Ctrl-Shift-F no Mac). Seu código é formatado automaticamente e, neste momento, deveria ser semelhante ao seguinte código: 
    <body>
    <h2>Welcome to <strong>IFPWAFCAD</strong>, the International Former
        Professional Wrestlers' Association for Counseling and Development!
    </h2>

    <table border="0">
        <thead>
            <tr>
                <th>IFPWAFCAD offers expert counseling in a wide range of fields.</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>To view the contact details of an IFPWAFCAD certified former
                    professional wrestler in your area, select a subject below:
                </td>
            </tr>
            <tr>
                <td>
                    <form action="response.jsp">
                        <strong>Select a subject:</strong>
                        <select name="subject_id">
                            <option></option>
                        </select>
                        <input type="submit" value="submit" name="submit" />
                    </form>
                </td>
            </tr>
        </tbody>
    </table>
</body>
    Para visualizar essa página em um navegador, clique com o botão direito do mouse no editor e escolha Executar arquivo (Shift-F6; Fn-Shift-F6 no Mac). Ao fazer isso, a página JSP é automaticamente compilada e implantada no servidor. O IDE é aberto no navegador por padrão para exibir a página do seu local de implantação.
    index.jsp exibido em um navegador

Criando a página de resposta

Para preparar a interface de response.jsp é necessário primeiro criar o arquivo no projeto. Observe que a maioria do conteúdo exibido nesta página é gerado dinamicamente com a tecnologia JSP. Portanto, nas etapas seguintes você adiciona espaços reservados que mais tarde substituirá pelo código JSP.

  1. Clique com o botão direito do mouse no nó do projeto IFPWAFCAD na janela Projetos e escolha Novo > JSP. A caixa de diálogo Novo arquivo JSF se abre.
  2. No campo Nome do arquivo JSP, insira response. Observe que a opção Páginas Web está atualmente selecionada no campo Localização, o que significa que o arquivo será criado no diretório web do projeto. Trata-se do mesmo local no qual se encontra a página de boas-vindas index.jsp.
  3. Aceite as outras configurações padrão e clique em Terminar. Um modelo, aberto no editor, é gerado para a nova página response.jsp. O novo nó JSP também é exibido abaixo de Páginas Web na janela Projetos.
    Nó response.jsp exibido na janela Projetos
  4. No editor, altere o título IFPWAFCAD: {espaço reservado}.
  5. Remova a linha <h1>Hello World!</h1> alinhe entre as marcações <body> e copie e cole a tabela HTML a seguir no corpo da página: 
    <table border="0">
    <thead>
        <tr>
            <th colspan="2">{placeholder}</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><strong>Description: </strong></td>
            <td><span style="font-size:smaller; font-style:italic;">{placeholder}</span></td>
        </tr>
        <tr>
            <td><strong>Counselor: </strong></td>
            <td>{placeholder}
                <br>
                <span style="font-size:smaller; font-style:italic;">
                member since: {placeholder}</span>
            </td>
        </tr>
        <tr>
            <td><strong>Contact Details: </strong></td>
            <td><strong>email: </strong>
                <a href="mailto:{placeholder}">{placeholder}</a>
                <br><strong>phone: </strong>{placeholder}
            </td>
        </tr>
    </tbody>
</table>
    Para visualizar essa página em um navegador, clique com o botão direito do mouse no editor e escolha Executar arquivo (Shift-F6; Fn-Shift-F6 no Mac). A página é compilada, implantada no servidor GlassFisher e aberta no navegador padrão.
    response.jsp exibido em um navegador

Criando uma folha de estilo

Crie uma folha de estilo simples que melhora a exibição da interface da Web. Este tutorial pressupõe que você sabe como funciona as regras de estilo e como elas afetam os elementos HTML correspondentes encontrados em index.jsp e response.jsp.

  1. Abra o assistente Novo arquivo pressionando o botão Novo arquivo ( botão Novo arquivo ) na barra de ferramentas principal do IDE. Selecione a categoria Web, Folha de estilo em cascata e clique em Próximo.
  2. Digite style em Nome do arquivo CSS e clique em Terminar. O IDE cria um arquivo CSS vazio e o coloca no mesmo local do projeto onde estão index.jsp e response.jsp. Note que agora é exibido um nó de style.css no projeto na janela Projetos e o arquivo é aberto no editor.
  3. No editor, adicione o conteúdo a seguir ao arquivo style.css: 
    body {
    font-family: Verdana, Arial, sans-serif;
    font-size: smaller;
    padding: 50px;
    color: #555;
}

h1 {
    text-align: left;
    letter-spacing: 6px;
    font-size: 1.4em;
    color: #be7429;
    font-weight: normal;
    width: 450px;
}

table {
    width: 580px;
    padding: 10px;
    background-color: #c5e7e0;
}

th {
    text-align: left;
    border-bottom: 1px solid;
}

td {
    padding: 10px;
}

a:link {
   color: #be7429;
   font-weight: normal;
   text-decoration: none;
}

a:link:hover {
   color: #be7429;
   font-weight: normal;
   text-decoration: underline;
}
  4. Vincule a folha de estilo a index.jsp e response.jsp. Nas duas páginas, adicione a linha a seguir entre as marcações <head>: 
    <link rel="stylesheet" type="text/css" href="style.css">
    Para navegar rapidamente entre arquivos que estão abertos no editor, pressione Ctrl-Tab e, em seguida, selecione o arquivo que deseja.


Preparando a comunicação entre o aplicativo e o banco de dados

A maneira mais eficiente de implementar comunicação entre o servidor e o banco de dados é configurar um pool de conexão de banco de dados. A criação de uma nova conexão para cada solicitação do cliente pode ser muito demorada, especialmente em aplicativos que recebem continuamente um grande número de solicitações. Para remediar isso, são criadas numerosas conexões que são mantidas em um pool de conexão. Todas as solicitações entrantes que requerem acesso à camada de dados do aplicativo usam uma conexão já criada do pool. Igualmente, quando uma solicitação é concluída, a conexão é fechada, mas volta ao pool.

Depois de preparar a fonte de dados e o pool de conexão do servidor, é necessário instruir o aplicativo a utilizar a fonte de dados. Isso normalmente é feito criando uma entrada no descritor de deployment web.xml do aplicativo. Finalmente, você precisa garantir que o driver do banco de dados (conector MySQL/Driver J JDBC) seja acessível ao servidor.


  1. Configurando uma fonte de dados JDBC e um pool de conexão
  2. Fazendo referência à fonte de dados do aplicativo
  3. Adicionando o arquivo JAR do driver do banco de dados ao servidor

Configurando uma fonte de dados JDBC e o pool de conexão

O GlassFish Server Open Source Edition contém bibliotecas de banco de dados Connection Pooling (DBCP) que oferecem a funcionalidade do pool de conexão de forma clara para você desenvolvedor. Para aproveitar isso, é necessário configurar uma JDBC (Java Database Connectivity) fonte de dados para o servidor que seu aplicativo pode utilizar para pool de conexão.

Para mais informações sobre a tecnologia JDBC, consulte Os tutoriais Java: princípios básicos do JDBC.

É possível configurar a fonte de dados diretamente no Console Admin do GlassFish Server ou, conforme descrito a seguir, você pode declarar os recursos que o aplicativo precisa em um arquivo sun-resources.xml. Quando o aplicativo é implantado, o servidor lê as declarações de recursos e cria os recursos necessários.

As etapas a seguir demonstram como declarar um pool de conexão e uma fonte de dados que conta com o pool de conexão. O assistente Recursos JDBC do NetBeans permite executar as duas ações.

  1. Abra o assistente Novo arquivo pressionando o botão Novo arquivo ( botão Novo arquivo ) na barra de ferramentas principal do IDE. Selecione a categoria servidor GlassFish e, em seguida, Recurso JDBC e clique em Próximo.
  2. Na Etapa 2, Atributos gerais, escolha a opção Criar novo pool de conexão JDBC e, em seguida, no campo de texto Nome JNDI, digite jdbc/IFPWAFCAD.
    Assistente de recursos JDBC, etapa 2: Atributos gerais
    A fonte de dados JDBC conta com a JNDI, a Interface de nomenclatura e diretório Java. A API JNDI fornece uma maneira uniforme de os aplicativos encontrarem e acessar em fontes de dados. Para mais informações, consulte O tutorial do JNDI.
  3. Como opção, adicione uma descrição para a fonte de dados. Por exemplo, digite: acessa o banco de dados que fornece dados para o aplicativo IFPWAFCAD.
  4. Clique em Próximo e clique em Próximo novamente para pular a etapa 3, Propriedades adicionais.
  5. Na Etapa 4, digite IfpwafcadPool para Nome do pool de conexão JDBC. Certifique-se de que a opção Extrair da conexão existente esteja selecionada e escolha jdbc:mysql://localhost:3306/MyNewDatabase na lista suspensa.
    assistente Recursos JDBC, etapa 4: Escolher conexão de banco de dados

    Observação: o assistente detecta quaisquer conexões de banco de dados que tenham sido configuradas no IDE. Portanto, neste ponto é necessário que você já tenha criado uma conexão ao banco de dados MyNewDatabase. Você pode verificar quais conexões foram criadas ao abrir a janela Serviços (Ctrl-5; &#8984-5 no Mac) e pesquisar os nós de conexão (ícone do nó de conexão do banco de dados) na categoria Banco de dados.
  6. Clique em Próximo. Na Etapa 5, note que o IDE extrai informações da conexão de banco de dados especificada na etapa anterior e define as propriedades nome e valor para o novo pool de conexão.
    Assistente Recursos JDBC, etapa 5: Adicionar propriedades do pool de conexão
  7. Clique em Terminar. O assistente gera um arquivo glassfish-resources.xml que contém entradas para a fonte de dados e o conjunto de conexões especificados.

Na janela Projetos, abra o arquivo recém-criado em Recursos do servidor > glassfish-resources.xml e observe que, dentro das marcações <resources>, foram declarados uma fonte de dados e um conjunto de conexões com os valores previamente especificados.

Observação. No NetBeans IDE 6.9 e em versões anteriores do IDE, o nome do arquivo gerado pelo IDE é sun-resources.xml.

Para confirmar se uma nova fonte de dados e um pool de conexão estão realmente registrados no servidor GlassFish, é possível implantar o projeto no servidor e, em seguida, localizar os recursos na janela Serviços do IDE:

  1. Na janela Projetos, clique com o botão direito do mouse no nó do projeto IFPWAFCAD e escolha Implantar. O servidor se inicia caso não esteja em execução e o projeto é compilado e implantado nele.
  2. Abra a janela Serviços (Ctrl-5; &#8984-5 no Mac) e expanda os nós Servidores > GlassFish > Recursos > JDBC > Recursos JDBC e Conjuntos de conexões. Note que a nova fonte de dados e o pool de conexão agora são exibidos:
    Nova fonte de dados e pool de conexão exibidos na janela Serviços

Fazendo referência à fonte de dados do aplicativo

Você precisa fazer referência ao recurso JDBC que acabou de configurar no aplicativo da Web. Para isso, é possível criar uma entrada no descritor de deployment web.xml do aplicativo.

Os descritores de deployment são arquivos de texto com base em XML que contêm informações que descrevem como um aplicativo deve ser implantado em um ambiente específico. São usados normalmente, por exemplo, para especificar os parâmetros de contexto do aplicativo, os padrões de comportamento, as configurações de segurança, bem como mapeamentos para servlets, filtros e listeners.

Observação. Se você especificou Java EE 6 como a versão do Java ao criar o projeto, será preciso criar o descritor de implementação selecionando Web > Descritor de implementação padrão no assistente Novo arquivo.

Execute as etapas a seguir para fazer referência à fonte de dados no descritor de implementação do aplicativo.

  1. Na janela Projetos, expanda o nó Arquivos de configuração e clique duas vezes em web.xml. Uma interface gráfica para o arquivo exibe a janela principal do IDE.
  2. Clique na aba Referências localizada na parte superior do editor.
  3. Expanda o cabeçalho Referências do recurso e clique em Adicionar para abrir a caixa de diálogo Adicionar referência do recurso.
  4. Em Nome do recurso, insira o nome do recurso que você forneceu ao configurar a fonte de dados no servidor acima (jdbc/IFPWAFCAD). O campo Descrição é opcional, mas você pode inserir uma descrição do recurso legível por humanos, por exemplo, Banco de dados do aplicativo IFPWAFCAD. Clique em OK.
    Caixa de diálogo Adicionar referência de recursos

    Clique em OK. O novo recurso é listado agora abaixo do cabeçalho Referências ao recurso.

    Novo recurso JDBC listado no descritor de deployment
  5. Para verificar se o recurso foi adicionado ao arquivo web.xml, clique na aba XML localizada na parte superior do editor. Observe que os identificadores <resource-ref> a seguir estão agora incluídos. 
    <resource-ref>
    <description>Database for IFPWAFCAD application</description>
    <res-ref-name>jdbc/IFPWAFCAD</res-ref-name>
    <res-type>javax.sql.dataSource</res-type>
    <res-auth>Container</res-auth>
    <res-sharing-scope>Shareable</res-sharing-scope>
</resource-ref>

Adicionando o arquivo JAR do driver do banco de dados ao servidor

A adição do arquivo JAR do driver do banco de dados é outra etapa vital para permitir que o servidor se comunique com o banco de dados. Normalmente, seria necessário localizar o diretório de instalação do driver do banco de dados e copiar o arquivo mysql-connector-java-5.1.6-bin.jar do diretório raiz do driver na pasta da biblioteca do servidor que estiver utilizando. Felizmente, o gerenciamento de servidor do IDE é capaz de detectar no deployment se o arquivo JAR foi adicionado e, caso não tenha sido, ele o adiciona automaticamente.

Para demonstrá-lo, abra a janela Servidores (Escolha Ferramentas > Servidores). O IDE fornece uma opção de deployment do driver JDBC. Se a opção estiver habilitada, ele inicia uma verificação para determinar se são necessários drivers para os aplicativos implantados do servidor. No caso do MySQL, se o driver for necessário e não for encontrado, o driver incorporado do IDE é implantado no local adequado do servidor.

  1. Escolha Ferramentas > Servidores para abrir a janela Servidores. Selecione o servidor GlassFish no painel esquerdo.
  2. No painel principal, selecione a opção Habilitar deployment do driver JDBC.
    Janela Servidores: servidor GlassFish V 3.0.1
  3. Antes de fechar a janela, anote o caminho indicado no campo de texto da pasta Domínios. Ao se conectar ao servidor GlassFish no IDE, você está se conectando, na realidade, a uma instância do servidor de aplicativo. Cada instância executa aplicativos em um domínio exclusivo e o campo Nome do domínio indica o nome do domínio que o servidor está utilizando. Conforme mostrado na imagem acima, o arquivo JAR do driver deverá estar localizado em domain1, que é o domínio padrão criado na instalação do servidor GlassFish.
  4. Clique em Fechar para sair da janela Servidores.
  5. No computador, vá até o diretório de instalação do servidor GlassFish e entre na subpasta domínios > domain1 > lib. . Como você já deve ter implantando o projeto IFPWAFCAD no servidor, deverá ver o arquivo mysql-connector-java-5.1.6-bin.jar. Se você não ver o arquivo JAR do driver, efetue a etapa a seguir.
  6. Implante seu projeto no servidor. Na janela Projetos do IDE, escolha Implantar no menu de contexto do nó do projeto. Você pode ver o progresso na janela Saída do IDE (Ctrl-4; &#8984-4 no Mac). A saída indica que o driver MySQL está implantado no servidor GlassFish.
    A janela Saída indica que o driver MySQL foi implantado
    Agora, se voltar à subpasta domain1/lib no computador, pode ver que o arquivo mysql-connector-java-5.1.6.x-bin.jar foi adicionado automaticamente.

Adicionando lógica dinâmica

Retornando para os espaços reservados index.jsp e response.jsp que você criou anteriormente no tutorial, você pode implementar o código JSTL que permite às páginas gerar conteúdo dinamicamente, ou seja, com base na entrada do usuário. Para isso, efetue as três tarefas a seguir.

  1. Adicione a biblioteca JSTL ao classpath do projeto
  2. Implemente código JSTL

Adicionando a biblioteca JSTL ao classpath do projeto

É possível aplicar a biblioteca de marcações padrão das páginas JavaServer (JSTL) para acessar e exibir dados tirados do banco de dados. O servidor GlassFish inclui a biblioteca JSTL por padrão. É possível verificar isso expandindo Bibliotecas do IFPWAFCAD > o nó do servidor GlassFish na janela Projetos e procurando o arquivo jstl-impl.jar. Como as bibliotecas do servidor GlassFish são, por padrão, adicionadas ao classpath do projeto, não é necessário efetuar nenhuma etapa para essa tarefa.

A JSTL fornece quatro áreas básicas de funcionalidade. Dentre elas estão:

  • core: tarefas comuns e estruturais, como iteratores e condicionais para manipular controle de fluxo
  • fmt: formatação da mensagem de internacionalização e localização
  • sql:acesso a banco de dados simples
  • xml: manipulação de conteúdo XML

Este tutorial foca no uso das bibliotecas de marcações core e sql.

Para mais informações sobre o JSTL, consulte O tutorial do Java EE 5, Capítulo 7: bibliotecas de marcações padrão de páginas JavaServer.

Implementação do código JSTL

Agora você pode implementar o código que recupera, de maneira dinâmica, os dados, exibindo-os para cada página. As duas páginas requerem que você implemente uma consulta SQL que utilize a fonte de dados criada anteriormente no tutorial.

O IDE fornece vários trechos de JSTL específicos do banco de dados que podem ser selecionados na Paleta (Ctrl-Shift-8; &#8984-Shift-8 no Mac).

Trechos de banco de dados disponíveis na Paleta

Também é possível acessar itens da Paleta pressionando Ctrl-Espaço no editor. É possível filtrar os itens do banco de dados digitando "db" e, em seguida, pressionando Ctrl-Espaço.

Trechos de banco de dados disponíveis na Paleta

index.jsp

Para exibir dinamicamente o conteúdo do formulário no index.jsp, você precisa acessar os names da tabela de banco de dados Subject.

  1. Coloque o mouse sobre o item Relatório do BD na Paleta.
    Trechos de banco de dados disponíveis na Paleta
    O item Relatório do BD utiliza a marcação <sql:query> para criar uma consulta SQL e, em seguida, a marcação <c:forEach> para passar pelo resultsetda consulta e obter os dados recuperados.
  2. Coloque o cursor acima da declaração <%@page ... %> (linha 7) e, em seguida, clique duas vezes no item Relatório do BD na Paleta. Na caixa de diálogo que é exibida, insira os seguintes detalhes:
    • Nome da variável: subjects
    • Escopo: page
    • Fonte de dados: jdbc/IFPWAFCAD
    • Instrução da consulta: SELECT subject_id, name FROM Subject
    Caixa de diálogo Inserir relatório do BD
  3. Clique em OK. O conteúdo a seguir é gerado no arquivo index.jsp. (Novo conteúdo mostrado em negrito.) 
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<%--
    Document   : index
    Created on : Dec 22, 2009, 7:39:49 PM
    Author     : nbuser
--%>

<sql:query var="subjects" dataSource="jdbc/IFPWAFCAD">
    SELECT subject_id, name FROM Subject
</sql:query>

<table border="1">
    <!-- column headers -->
    <tr>
    <c:forEach var="columnName" items="${subjects.columnNames}">
        <th><c:out value="${columnName}"/></th>
    </c:forEach>
</tr>
<!-- column data -->
<c:forEach var="row" items="${subjects.rowsByIndex}">
    <tr>
    <c:forEach var="column" items="${row}">
        <td><c:out value="${column}"/></td>
    </c:forEach>
    </tr>
</c:forEach>
</table>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    Note que o IDE adicionou automaticamente as diretivas taglib necessárias para as marcações JSTL utilizadas no conteúdo gerado <sql:query> e <c:forEach>). Uma diretiva taglib declara que a página do JSP utiliza marcações personalizadas (por exemplo, JSTL), nomeia a biblioteca de marcações que as define e especifica seu prefixo de marcação.
  4. Execute o projeto para ver como ele é exibido no navegador. Clique com o botão direito do mouse no nó na janela Projetos e selecione Executar.

    Quando você seleciona Executar, o IDE implementa o projeto no servidor GlassFish, a página de índice é compilada em um servlet e a página de boas-vindas é aberta em seu navegador padrão. O código gerado do item relatório de BD cria a tabela a seguir na página de boas-vindas.

    O navegador exibindo a tabela contendo dados da tabela de banco de dados Subject

    Como podemos ver, o item relatório de BD permite testar rapidamente a conexão do banco de dados e permite, também, visualizar os dados da tabela do banco de dados no navegador. Isso pode ser particularmente útil ao se fazer protótipos.

    As etapas a seguir demonstram como integrar o código gerado à lista suspensa HTML que você criou anteriormente no tutorial.

  5. Examine os dados da coluna no código gerado. Duas marcações <c:forEach> são utilizadas, uma é aninhada dentro da outra. Isso faz com que o contêiner JSP (por exemplo, o servidor GlassFish) execute um loop em todas as linhas da tabela e, para cada linha, ele executa um loop por todas as colunas. Dessa maneira, os dados da tabela inteira são exibidos.
  6. Integre as marcações <c:forEach> no formato HTML, como se segue. O valor de cada item se torna subject_id e o texto de saída se torna o nome, conforme gravado no banco de dados. (As alterações são exibidas em negrito). 
    <form action="response.jsp">
    <strong>Select a subject:</strong>
    <select name="subject_id">
        <c:forEach var="row" items="${subjects.rowsByIndex}">
            <c:forEach var="column" items="${row}">
                <option value="<c:out value="${column}"/>"><c:out value="${column}"/></option>
            </c:forEach>
        </c:forEach>
    </select>
    <input type="submit" value="submit" name="submit" />
</form>
    Uma maneira alternativa e mais simples de integrar as marcações <c:forEach> ao formulário HTML seria como se segue. 
    <form action="response.jsp">
    <strong>Select a subject:</strong>
    <select name="subject_id">
        <c:forEach var="row" items="${subjects.rows}">
            <option value="${row.subject_id}">${row.name}</option>
        </c:forEach>
    </select>
    <input type="submit" value="submit" name="submit" />
</form>

    Em qualquer um dos casos, as marcações <c:forEach> executam loop por todos os valores de subject_id e nome da consulta SQL e inserem cada par nas marcações <option> HTML. Desta maneira, a lista suspensa do formulário é preenchida com dados.

  7. Exclua a tabela que foi gerada a partir do item Relatório de BD. (A exclusão é mostrada a seguir como texto tachado.) 
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<%--
    Document   : index
    Created on : Dec 22, 2009, 7:39:49 PM
    Author     : nbuser
--%>

<sql:query var="subjects" dataSource="jdbc/IFPWAFCAD">
    SELECT subject_id, name FROM Subject
</sql:query>

<table border="1">
    <!-- column headers -->
    <tr>
    <c:forEach var="columnName" items="${subjects.columnNames}">
        <th><c:out value="${columnName}"/></th>
    </c:forEach>
</tr>
<!-- column data -->
<c:forEach var="row" items="${subjects.rowsByIndex}">
    <tr>
    <c:forEach var="column" items="${row}">
        <td><c:out value="${column}"/></td>
    </c:forEach>
    </tr>
</c:forEach>
</table>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
  8. Salve as alterações (Ctrl-S; &#8984-S no Mac).
  9. Atualize a página de boas-vindas de seu projeto no navegador.

    Note que a lista suspensa do navegador contém, agora, nomes de assuntos que foram recuperados do banco de dados.

    Lista suspensa de assuntos exibida em um navegador

    Observe que não é preciso reimplementar seu projeto. Por padrão, compilar ao salvar está ativado para seu projeto. Isso significa que, quando você modifica e salva um arquivo, ele é automaticamente compilado e implementado, e não é necessário recompilar o projeto inteiro. É possível ativar e desativar compilar ao salvar para seu projeto na categoria Compilar da janela Propriedades do projeto.

response.jsp

A página de resposta fornece detalhes para o conselheiro que corresponde ao assunto escolhido na página de boas-vindas. A consulta que você criar deve selecionar o registro do conselheiro cuja counselor_id corresponda a counselor_idfk do registro do assunto selecionado.

  1. Coloque o cursor acima da declaração <%@page ... %> (linha 7), digite "db" e pressione Ctrl-Espaço. Selecione Consulta de BD. (Consulte a dica do autocompletar de código exibida acima.)
  2. Na caixa de diálogo que é exibida, insira os seguintes detalhes:
    • Nome da variável: counselorQuery
    • Escopo: page
    • Fonte de dados: jdbc/IFPWAFCAD
    • Instrução de consulta: SELECT * FROM Subject, Counselor WHERE Counselor.counselor_id = Subject.counselor_idfk AND Subject.subject_id = ? <sql:param value="${param.subject_id}"/>
    Caixa de diálogo Inserir consulta de BD
  3. Clique em OK. O conteúdo a seguir é gerado no arquivo response.jsp. (Novo conteúdo mostrado em negrito.) 
    <%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<%--
    Document   : response
    Created on : Dec 22, 2009, 8:52:57 PM
    Author     : nbuser
--%>

<sql:query var="counselorQuery" dataSource="jdbc/IFPWAFCAD">
    SELECT * FROM Subject, Counselor
    WHERE Counselor.counselor_id = Subject.counselor_idfk
    AND Subject.subject_id = ? <sql:param value="${param.subject_id}"/>
</sql:query>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    Note que o IDE adicionou automaticamente a diretiva taglib necessária para a marcação <sql:query>. Além disso, observe que você utilizou uma marcação <sql:param> diretamente na consulta. Como essa consulta conta com o valor subject_id que foi enviado de index.jsp, é possível extrair o valor utilizando uma instrução EL (Linguagem de expressão) na forma de ${param.subject_id} e, em seguida, passá-lo para a marcação <sql:param>, para que ele possa ser utilizado no local do ponto de interrogação do SQL (?) durante o tempo de execução.
  4. Utilize uma marcação <c:set> para definir uma variável que corresponda ao primeiro registro (ou seja, linha) do resultset retornado da consulta. (Novo conteúdo mostrado em negrito.) 
    <sql:query var="counselorQuery" dataSource="jdbc/IFPWAFCAD">
    SELECT * FROM Subject, Counselor
    WHERE Counselor.counselor_id = Subject.counselor_idfk
    AND Subject.subject_id = ? <sql:param value="${param.subject_id}"/>
</sql:query>

<c:set var="counselorDetails" value="${counselorQuery.rows[0]}"/>
    Embora o resultset retornado da consulta deva conter apenas um único registro, é uma etapa necessária, pois a página precisa acessar valores do registro utilizando instruções EL (Linguagem de expressão). Lembre-se que no index.jsp você podia acessar valores do resultset simplesmente utilizando uma marcação <c:forEach>. No entanto, a marcação <c:forEach> opera definindo uma variável para linhas contidas na consulta, permitindo, assim, extrair valores incluindo a variável da linha nas instruções EL.
  5. Adicione a diretiva taglib para a biblioteca core do JSTL na parte superior do arquivo, para que a marcação <c:set> seja entendida. (Novo conteúdo mostrado em negrito.) 
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
  6. Na remarcação HTML, substitua todos os espaços reservados por código de instruções EL que exibem os dados contidos na variável counselorDetails. (Alterações mostradas a seguir em negrito): 
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>${counselorDetails.name}</title>
    </head>

    <body>
        <table>
            <tr>
                <th colspan="2">${counselorDetails.name}</th>
            </tr>
            <tr>
                <td><strong>Description: </strong></td>
                <td><span style="font-size:smaller; font-style:italic;">${counselorDetails.description}</span></td>
            </tr>
            <tr>
                <td><strong>Counselor: </strong></td>
                <td><strong>${counselorDetails.first_name} ${counselorDetails.nick_name} ${counselorDetails.last_name}</strong>
                    <br><span style="font-size:smaller; font-style:italic;">
                    <em>member since: ${counselorDetails.member_since}</em></span></td>
            </tr>
            <tr>
                <td><strong>Contact Details: </strong></td>
                <td><strong>email: </strong>
                    <a href="mailto:${counselorDetails.email}">${counselorDetails.email}</a>
                    <br><strong>phone: </strong>${counselorDetails.telephone}</td>
            </tr>
        </table>
    </body>
</html>

Executando do aplicativo concluído

Você, agora, concluiu o aplicativo. Tente executá-lo novamente para ver como ele é exibido no navegador. Note que por causa do recurso Compilar ao salvar do NetBeans, você não precisa se preocupar sobre compilar ou reimplantar o aplicativo. Assim, ao executar um projeto, você terá certeza de que o deployment contém as alterações mais recentes.

Clique no botão Executar projeto (botão Executar projeto) na barra de ferramentas principal. A página index.jsp se abre no navegador padrão do IDE.

Quando index.jsp for exibido no navegador, selecione um assunto na lista suspensa e clique em submit. Você deveria ser enviado agora à página response.jsp, mostrando os detalhes correspondentes à sua seleção.

response.jsp exibido em um navegador, mostrando os dados recuperados do banco de dados

Isso conclui o tutorial Criando uma aplicação Web simples usando um banco de dados MySQL Este documento demonstra como criar uma aplicação Web simples que se conecta a um banco de dados MySQL. Este tutorial também demonstrou como construir um aplicativo utilizando uma arquitetura básica de duas camadas e utilizou várias tecnologias, incluindo JSP, JSTL, JDBC e JNDI, como uma forma de acessar e exibir dinamicamente os dados.


Solução de problemas

A maioria dos problemas que ocorrem com a aplicação do tutorial são devidos a dificuldades de comunicação entre o GlassFish Server Open Source Edition e o servidor de banco de dados MySQL. Se sua aplicação não for exibida corretamente ou se estiver recebendo um erro de servidor, os exames a seguir podem ser úteis.

Existem recursos do banco de dados?

Utilize a janela Serviços do IDE (Ctrl-5; &#8984-5 no Mac) para garantir que o servidor MySQL esteja executando e que MyNewDatabase seja acessível e contenha os dados da tabela adequados.

  • Para conectar-se ao servidor de banco de dados MySQL, clique com o botão direito do mouse no nó Servidor MySQL e escolha Conectar.
  • Se um nó de conexão ( Nó de conexão do banco de dados ) para MyNewDatabase não for exibido na janela Serviços, você poderá criar uma conexão clicando com o botão direito do mouse no nó do driver do MySQL ( Nó do driver do banco de dados ) e escolhendo Conectar utilizando. Insira os detalhes necessários na caixa de diálogo exibida.
    Caixa de diálogo Nova conexão de banco de dados
    Os campos fornecidos na caixa de diálogo Nova conexão de banco de dados espelham a string de URL inserida na opção Mostrar URL do JDBC. Portanto, se souber o URL (por exemplo, jdbc:mysql://localhost:3306/MyNewDatabase) você poderá colá-lo no campo Mostrar URL do JDBC e os campos da caixa de diálogo remanescentes se tornarão automaticamente preenchidos.
  • Para garantir que as tabelas Sujeito e Conselheiro existem e contêm dados de amostra, expanda o nó de conexão MyNewDatabase ( Nó de conexão do banco de dados ) e localize o nó de catálogo MyNewDatabase ( Nó de catálogo do banco de dados ). Expanda o nó de catálogo para visualizar tabelas existentes. Você pode visualizar os dados da tabela clicando com o botão direito do mouse em um nó da tabela e escolhendo Visualizar dados.
    Janela Serviços: clique com o botão direito do mouse no nó da tabela do banco de dados para visualizar o menu

O pool de conexão e a fonte de dados existem no servidor?

Depois de implementar o aplicativo no servidor GlassFish, o sun-resources.xml contido no projeto deverá instruir o servidor a criar um recurso e um conjunto de conexões JDBC. É possível determinar se eles existem no nó Servidores na janela Serviços.

  • Expanda o nó Servidores > servidor GlassFish > Recursos. Expanda Recursos JDBC para visualizar a fonte de dados jdbc/IFPWAFCAD criada a partir de glassfish-resources.xml. Expanda o nó Conjuntos de conexões para visualizar o conjunto de conexões IfpwafcadPool criado a partir de glassfish-resources.xml. (Isso está demonstrado acima.)

O conector MySQL Connector/driver J é acessível para o servidor GlassFish?

Certifique-se de que o conector MySQL/driver J foi implantado no servidor GlassFish. (Isso é discutido em Adicionando o arquivo JAR do driver do banco de dados no servidor.)

  • Localize a pasta de instalação do servidor GlassFish no computador e vá até a subpasta GlassFish domains/domain1/lib. Aqui você deve encontrar o arquivo mysql-connector-java-5.1.6-bin.jar.

O banco de dados é protegido por senha?

O banco de dados precisa ser protegido por senha para que a fonte de dados do servidor GlassFish funcione adequadamente neste tutorial. Se estiver utilizando a conta MySQL raiz com uma senha vazia, será possível definir a senha a partir de um prompt de linha de comando.

  • Para definir sua senha como nbuser, navegue para o diretório bin de instalação do MySQL no prompt de linha de comando e insira o seguinte: 
    shell> mysql -u root
mysql> UPDATE mysql.user SET Password = PASSWORD('nbuser')
    ->     WHERE User = 'root';
mysql> FLUSH PRIVILEGES;
    Para mais informações, consulte o Manual de referência MySQL oficial: Proteção das contas MySQL iniciais.

As propriedades do pool de conexão estão definidas corretamente?

Certifique-se de que o pool de conexão esteja funcionando corretamente para o servidor.

  1. Abra a janela Serviços (Ctrl-5; &#8984-5 no Mac) e expanda o nó Servidores.
  2. Clique com o botão direito do mouse no nó do servidor GlassFish e escolha Exibir Console Admin.
  3. Insira admin/adminadmin para o nome de usuário/senha padrão.
  4. Na árvore do lado esquerdo do console, expanda o nó Recursos > JDBC > Pools de conexão > IfpwafcadPool. Detalhes do pool de conexão IfpwafcadPool são exibidos na janela principal.
  5. Clique no botão Ping. Se o pool de conexão estiver configurado adequadamente, você verá uma mensagem "Ping bem-sucedido".
    O Console Admin do servidor GlassFish - Pool de conexão é exibido
  6. Se o ping falhar, clique na aba Propriedades adicionais e verifique se os valores da propriedade listada estão corretamente definidos.


Consulte também

Para mais informações sobre o desenvolvimento Web Java, consulte os recursos a seguir.