riando uma aplicao Web Simples Usando um Banco de Dados MySQL

Escrito por Troy Giunipero Este documento descreve como criar uma aplicao Web simples que se conecta ao servidor de banco de dados MySQL. Tambm aborda algumas ideias e tecnologias bsicas em desenvolvimento da Web, comoJavaServer Pages (JSP), JavaServer Pages Standard Tag Library (JSTL), a API JDBC (Java Database Connectivity) e duas camadas, arquitetura de servidor do cliente. Este tutorial est destinado a iniciantes com conhecimento bsico 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 cdigo-fonte aberto popular geralmente utilizado em aplicaes 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 continuao do tutorial Conectando a um Banco de Dados MySQL e pressupe que um banco de dados MySQL denominado MyNewDatabase j tenha sido criado, para o qual voc registrou uma conexo no NetBeans IDE. Os dados de tabela usados nesse tutorial esto em ifpwafcad.sql e tambm so necessrios para este tutorial. Este arquivo SQL cria duas tabelas, Subject e Counselor, a seguir, preenche-as com os dados de amostra. Se necessrio, salve este arquivo no seu computador, a seguir, abra-o no NetBeans IDE e execute-o no banco de dados MySQL com o nome MyNewDatabase. Contedo

Planejando a Estrutura Criando um Novo Projeto Preparando a Interface da Web Configurando a Pgina de Boas-Vindas Criando a pgina de resposta Criando uma folha de estilo Preparando a Comunicao entre a Aplicao e o Banco de Dados Configurando uma fonte de dados JDBC e um pool de conexes Fazendo referncia fonte de dados da aplicao Adicionando o arquivo JAR do driver do banco de dados ao servidor Adicionando Lgica Dinmica Adicionando a biblioteca JSTL ao classpath do projeto

Implementando o cdigo JSTL Executando a Aplicao Pronta Soluo de Problemas Existem recursos do banco de dados? O pool de conexes e a fonte de dados existem no servidor? O driver MySQL Connector/J est acessvel ao GlassFish Server? O banco de dados protegido por senha? As propriedades do pool de conexes esto definidas corretamente? Consulte Tambm Para seguir este tutorial, os recursos e softwares a seguir so necessrios. Software ou Recurso Verso Necessria

NetBeans IDE

Pacote Java EE 7.1, 7.2, 7.3, 7.4

JDK (Java Development Kit)

verso 6 ou 7

Servidor de banco de dados MySQL

5.x

Driver MySQL Connector/J JDBC

verso 5.x

GlassFish Server Open Source Edition 3.x ou 4.x Observaes:

O pacote de download Java do NetBeans IDE permite instalar o GlassFish Server. necessrio ter o GlassFish Server para trabalhar neste tutorial.

O Driver MySQL Connector/J JDBC, necessrio para a comunicao entre as plataformas Java e o protocolo do banco de dados MySQL, est includo no NetBeans IDE.

Se voc precisar comparar seu projeto com uma soluo que funciona, faa download da aplicao de amostra.

Planejando a Estrutura
Aplicaes Web simples podem ser projetadas utilizando uma arquitetura de duas camadas, na qual um cliente se comunica diretamente com um servidor. Neste tutorial, uma aplicao Java Web se comunica diretamente com um banco de dados MySQL utilizando a API de Conectividade do Banco de Dados Java. Em essncia, o Driver MySQL Connector/J JDBC que permite a comunicao entre o cdigo Java entendido pelo servidor de aplicaes (o GlassFish Server) e qualquer contedo da SQL, a linguagem entendida pelo servidor do banco de dados (MySQL).

A aplicao construda neste tutorial envolve a criao de duas pginas JSP. Em cada uma dessas pginas, voc utiliza HTML e CSS para implementar uma interface simples e aplica a tecnologia JSTL para executar a lgica que consulta diretamente o banco de dados e insere os dados recuperados nas duas pginas. As duas tabelas do banco de dados, Subject e Counselor, esto contidas no banco de dados MySQL,MyNewDatabase, criado com a concluso do tutorial Conectando ao Banco de Dados MySQL. Considere o cenrio de duas camadas a seguir.

A pgina de boas-vindas (index.jsp) apresenta ao usurio um form HTML simples. Quando um browser requer index.jsp, o cdigo JSTL da pgina inicia uma consulta em MyNewDatabase. Ele recupera dados da tabela do banco de dados Subject e os insere na pgina, antes de eles serem enviados ao browser. Quando o usurio submete sua seleo no form HTML da pgina de boas-vindas, a submisso inicia uma solicitao para a pgina de resposta (response.jsp). Novamente, o cdigo JSTL da pgina inicia uma consulta em MyNewDatabase. Neste momento, ele recupera dados das tabelas Subject e Counselor e os insere na pgina, permitindo que o usurio exiba os dados com base na sua seleo quando a pgina retornada para o browser. Para implementar o cenrio descrito acima, desenvolva uma aplicao simples para uma organizao fictcia com o nome IFPWAFCAD, Associao Internacional de Ex-Lutadores Profissionais para Aconselhamento e Desenvolvimento.

index.jsp

response.jsp

Criando um Novo Projeto

Comece criando um novo projeto Java Web no IDE:

1.

Escolha Arquivo > Novo Projeto (Ctrl-Shift-N; &#8984-Shift-N no Mac) no menu principal. Selecione a categoria Java Web e aplicao Web. Clique em Prximo.

O assistente de Novo Projeto permite criar uma aplicao Web vazia em um projeto IDE padro. O projeto padro utiliza um script de construo Ant gerado pelo IDE para compilar, implantar e executar a aplicao. 2. Em Nome do Projeto, digite IFPWAFCAD. Alm disso, especifique o local para o projeto no computador. (Por default, o IDE coloca projetos em uma pasta NetBeansProjects localizada no diretrio home). Clique em Prximo. 3. No painel Servidor e Configuraes, especifique o GlassFish Server como o servidor que ser utilizado para executar a aplicao. Observao.O GlassFish Server ser exibido no campo drop-down Servidor se voc tiver instalado a verso Java do NetBeans IDE. Como o GlassFish Server est includo no download, ele automaticamente registrado no IDE. Se voc quiser utilizar um servidor diferente para esse projeto, clique no boto Adicionar localizado ao lado do campo drop-down Servidor e registre um servidor diferente no IDE. No entanto, trabalhar com servidores que no o GlassFish Server est alm do escopo deste tutorial.

4.

No campo Verso do Java EE, selecione Java EE 5.

Os projetos da Web Java EE 6 e Java EE 7 no exigem o uso do descritor de implantao web.xml e o modelo de projeto do NetBeans no inclui o arquivo web.xml em projetos Java EE 6 e Java EE 7. No entanto, este tutorial demonstra como declarar uma fonte de dados no descritor de implantao e no conta com nenhuma funcionalidade especfico do Java EE 6 ou Java EE 7, portanto, possvel definir a verso do projeto como Java EE 5. Observao. Voc pode igualmente definir a verso do projeto como Java EE 6 ou Java EE 7 e, em seguida, criar um descritor de implantao web.xml. (No assistente de Novo Arquivo, selecione a categoria Web e, em seguida, Descritor de Implantao Padro). 5. Clique em Finalizar. O IDE cria um modelo de projeto para toda a aplicao e abre uma pgina JSP vazia (index.jsp) no editor. O arquivo index.jsp serve como pgina de boas-vindas da aplicao.

Preparando a Interface da Web

Comece preparando as pginas de boas-vindas (index.jsp) e de resposta (response.jsp). A pgina de boas-vindas implementa um form HTML que utilizado para capturar dados do usurio. As duas pginas implementam uma tabela HTML para exibir os dados de forma estruturada. Nesta seo, voc tambm criar uma folha de estilo que ir melhorar a aparncia das duas pginas.

Configurando a Pgina de Boas-Vindas Criando a pgina de resposta Criando uma folha de estilo

Configurando a pgina de boas-vindas

Confirme se index.jsp est aberto no editor. Se o arquivo ainda no estiver aberto, clique duas vezes no index.jsp no n das Pginas Web no projeto IFPWAFCAD na janela Projetos. 1. No editor, altere o texto entre as tags <title> para Homepage da IFPWAFCAD.

2.

Altere o texto entre as tags <h1> para: Bem-vindo IFPWAFCAD, a Associao

internacional de Ex-Lutadores Profissionais para Aconselhamento e Desenvolvimento!.

3. Abra a Paleta do IDE selecionando 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 snippet de cdigo default do item exibido.

Voc pode configurar a Paleta conforme desejar: clique com o boto direito do mouse na Paleta e selecione 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 tags <h1>. ( a que voc deseja implementar a nova tabela HTML.) Em seguida, na Paleta, clique duas vezes no cone Tabela. 5. Na caixa de dilogo Inserir Tabela exibida, especifique os seguintes valores e clique em OK: Linhas: 2 Colunas: 1 Tamanho da Borda: 0 O cdigo da tabela HTML gerado e adicionado a sua pgina. 6. Adicione o contedo a seguir ao cabealho da tabela e clula da primeira linha da tabela (novo contedo mostrado em negrito):

7. <table border="0"> 8. <thead> 9. <tr> 10. <th>IFPWAFCAD offers expert counseling in a wide range of fields.</th> 11. 12. </tr> </thead>

13. 14. 15.

<tbody> <tr>

<td>To view the contact details of an IFPWAFCAD certified former 16. professional wrestler in your area, select a subject below:</td> </tr>
17. Na linha inferior da tabela, insira um form HTML. Para isso, coloque o cursor entre o segundo par de tags <td>, em seguida, clique duas vezes no cone do form HTML ( clique em OK. ) na Paleta. Na

caixa de dilogo Inserir Form, digite response.jsp no campo Texto da Ao e, em seguida,

18. Digite o contedo a seguir entre as tags <form> (novo contedo mostrado em negrito):

19. <tr> 20. <td> 21. <form action="response.jsp"> 22. <strong>Select a subject:</strong> 23. 24. </tr>
25. Pressione Enter para adicionar uma linha vazia aps o contedo que voc acabou de adicionar e, em seguida, clique duas vezes na Lista Drop-down na Paleta para abrir a caixa de dilogo Inserir Lista Drop-down. 26. Digite subject_id para o campo de texto Nome na caixa de dilogo Inserir Lista Drop-down e clique em OK. Observe que o snippet de cdigo da lista drop-down ser adicionado ao form. O nmero de opes da lista drop-down no importante no momento. Mais adiante neste tutorial, voc adicionar tags JSTL que iro gerar dinamicamente as opes com base nos dados coletados da tabela do banco de dados Subject. 27. Adicione um item de boto Submeter ( ) ao ponto bem ao lado da lista drop-down adicionada. possvel utilizar a Paleta para fazer isso ou chamar a funcionalidade autocompletar cdigo do

</form> </td>

editor, conforme ilustrado na etapa anterior. Na caixa de dilogo Inserir Boto, digite submit nos campos de texto Nome e Label e clique em OK. 28. Para formatar seu cdigo, clique com o boto direito do mouse no editor e selecione Formatar (Alt-Shift-F; Ctrl-Shift-F no Mac). Seu cdigo ser formatado automaticamente e dever ter a aparncia semelhante ao seguinte cdigo:

29. <body> 30. <h2>Welcome to <strong>IFPWAFCAD</strong>, the International Former 31. Professional Wrestlers' Association for Counseling and Development! 32. </h2> 33. 34. <table border="0"> 35. <thead> 36. <tr> 37. <th>IFPWAFCAD offers expert counseling in a wide range of fields.</th> 38. </tr> 39. </thead> 40. <tbody> 41. <tr> 42. <td>To view the contact details of an IFPWAFCAD certified former 43. professional wrestler in your area, select a subject below:</td> 44. </tr> 45. <tr> 46. <td> 47. <form action="response.jsp"> 48. <strong>Select a subject:</strong> 49. <select name="subject_id"> 50. <option></option> 51. </select> 52. <input type="submit" value="submit" name="submit" /> 53. </form> 54. </td> 55. </tr> 56. </tbody> 57. </table> </body>
Para exibir essa pgina em um browser, clique com o boto direito do mouse no editor e selecione Executar Arquivo (Shift-F6; Fn-Shift-F6 no Mac). Quando voc fizer isso, a pgina JSP ser automaticamente compilada e implantada no servidor. O IDE ser aberto no browser default para exibir a pgina do seu local de implantao.

Criando a pgina de resposta

Para preparar a interface de response.jsp necessrio primeiro criar o arquivo no projeto. Observe que a maioria do contedo exibido nesta pgina gerado dinamicamente com a tecnologia JSP. Portanto, nas etapas a seguir voc adicionar espaos reservados que posteriormente sero substitudos pelo cdigo JSP. 1. Clique com o boto direito do mouse no n do projeto IFPWAFCAD na janela Projetos e selecione Novo > JSP. A caixa de dilogo Novo Arquivo JSF ser aberta. 2. No campo Nome do Arquivo JSP, digite response. Observe que a opo Pginas Web est atualmente selecionada no campo Localizao, o que significa que o arquivo ser criado no diretrio web do projeto. Trata-se do mesmo local em que se encontra a pgina de boasvindas index.jsp. 3. Aceite as outras configuraes default e clique em Finalizar. Um modelo, aberto no editor, ser gerado para a nova pgina response.jsp. O novo n JSP tambm ser exibido abaixo de Pginas Web na janela Projetos.

4. 5.

No editor, altere o ttulo IFPWAFCAD: {placeholder}. Remova a linha <h1>Hello World!</h1> alinhe entre as tags <body> e copie e cole a tabela HTML a seguir no corpo da pgina:

6. <table border="0">

7. 8. 9. 10. 11. 12. 13. 14. 15.

<thead> <tr>

<th colspan="2">{placeholder}</th> </tr> </thead> <tbody> <tr> <td><strong>Description: </strong></td> <td><span style="font-size:smaller; fontstyle:italic;">{placeholder}</span></td> 16. </tr> 17. <tr> 18. <td><strong>Counselor: </strong></td> 19. <td>{placeholder} 20. <br> 21. <span style="font-size:smaller; fontstyle:italic;"> 22. member since: {placeholder}</span> 23. </td> 24. </tr> 25. <tr> 26. <td><strong>Contact Details: </strong></td> 27. <td><strong>email: </strong> 28. <a href="mailto:{placeholder}">{placeholder}</a> 29. <br><strong>phone: </strong>{placeholder} 30. </td> 31. </tr> 32. </tbody> </table>
Para exibir essa pgina em um browser, clique com o boto direito do mouse no editor e selecione Executar Arquivo (Shift-F6; Fn-Shift-F6 no Mac). A pgina ser compilada, implantada no GlassFish Server e aberta no browser default.

Criando uma folha de estilo

Crie uma folha de estilo simples para melhorar a view da interface da Web. Este tutorial pressupe 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 de Novo Projeto pressionando o boto ( Cascata e clique em Prximo. 2. Digite style em Nome do Arquivo CSS e clique em Finalizar. O IDE cria um arquivo CSS vazio e o coloca no mesmo local do projeto onde esto index.jsp e response.jsp. Observe que agora ser exibido um n de style.css no projeto, na janela Projetos, e o arquivo ser aberto no editor. 3. No editor, adicione o contedo a seguir ao arquivo style.css: ) Novo Arquivo na barra de

ferramentas principal do IDE. Selecione a categoria Web, em seguida, Folha de Estilo em

4. body { 5. font-family: Verdana, Arial, sans-serif; 6. font-size: smaller; 7. padding: 50px; 8. color: #555; 9. } 10. 11. h1 { 12. text-align: left; 13. letter-spacing: 6px; 14. font-size: 1.4em; 15. color: #be7429; 16. font-weight: normal; 17. width: 450px; 18. } 19. 20. table { 21. width: 580px;

22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. }

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;

45. Vincule a folha de estilo a index.jsp e response.jsp. Nas duas pginas, adicione a linha a seguir entre as tags <head>:

<link rel="stylesheet" type="text/css" href="style.css">

Para navegar rapidamente entre arquivos que esto abertos no editor, pressione Ctrl-Tab e, em seguida, selecione o arquivo que deseja.

Preparando a Comunicao entre a Aplicao e o Banco de Dados

A maneira mais eficiente de implementar comunicao entre o servidor e o banco de dados configurar um pool de conexes de banco de dados. A criao de uma nova conexo para cada solicitao do cliente pode ser muito demorada, especialmente em aplicaes que recebem continuamente um grande nmero de solicitaes. Para remediar isso, so criadas vrias conexes que so mantidas em um pool de conexes. Todas as solicitaes de entrada que requerem acesso camada de dados da aplicao usam uma conexo j criada do pool. Igualmente, quando uma solicitao concluda, a conexo fechada, mas volta ao pool. Depois de preparar a fonte de dados e o pool de conexes do servidor, necessrio instruir a aplicao a utilizar a fonte de dados. Isso normalmente feito criando uma entrada no descritor de implantao web.xml da aplicao. Finalmente, voc precisa garantir que o driver do banco de dados (Driver MySQL Connector/J JDBC) esteja acessvel ao servidor.

Importante: Deste ponto em diante, voc precisa assegurar-se de ter um banco de dados MySQL denominadoMyNewDatabase configurado e com dados de amostra no ifpwafcad.sql. Este arquivo SQL cria duas tabelas, Subject eCounselor, a seguir, preenche-as com os dados de amostra. Se voc ainda no tiver feito isso ou se precisar de ajuda, consulteConectando a um Banco de Dados MySQL antes de prosseguir com este tutorial. Alm disso, seu banco de dados precisa ser protegido por senha para criar uma fonte de dados e trabalhar com o GlassFish Server neste tutorial. Se voc estiver utilizando a conta MySQL root sem senha, voc poder definir a senha usando um prompt de linha de comandos. Este tutorial utiliza nbuser como senha de exemplo. Para definir sua senha como nbuser, navegue para o diretrio bin de instalao do MySQL no prompt de linha de comandos e insira o seguinte:

shell> mysql -u root mysql> UPDATE mysql.user SET Password = PASSWORD('nbuser') -> WHERE User = 'root'; mysql> FLUSH PRIVILEGES;
Para mais informaes, consulte o Manual de Referncia MySQL oficial: Proteo das Contas MySQL Iniciais.

1. 2. 3.

Configurando uma fonte de dados JDBC e um pool de conexes Fazendo referncia fonte de dados da aplicao Adicionando o arquivo JAR do driver do banco de dados ao servidor

Configurando uma fonte de dados JDBC e o pool de conexes

O GlassFish Server Open Source Edition contm bibliotecas de DBCP (Database Connection Pooling Pool de Conexes do Banco de Dados) que oferecem a funcionalidade de pool de conexes de forma transparente a voc como desenvolvedor. Para aproveitar esse recurso, necessrio configurar uma fonte de dados JDBC (Java Database Connectivity) para o servidor que a sua aplicao pode utilizar para o pool de conexes. Para obter mais informaes sobre a tecnologia JDBC, consulte Tutoriais Java: Conceitos Bsicos do JDBC. possvel configurar a fonte de dados diretamente na Console de Administrao do GlassFish Server ou, conforme descrito a seguir, voc pode declarar os recursos de que a aplicao precisa em um arquivoglassfish-resources.xml. Quando a aplicao implantada, o servidor l as declaraes de recursos e cria os recursos necessrios. As etapas a seguir demonstram como declarar um pool de conexes e uma fonte de dados com base no pool de conexes. O assistente de Recursos JDBC do NetBeans permite executar as duas aes. 1. Abra o assistente de Novo Projeto pressionando o boto ( JDBC e clique em Prximo. 2. Na Etapa 2, Atributos Gerais, selecione a opo Criar Novo Pool de Conexes JDBC e, em seguida, no campo de texto Nome JNDI, digite jdbc/IFPWAFCAD. ) Novo Arquivo na barra de

ferramentas principal do IDE. Selecione a categoria do GlassFish Server e, em seguida, Recurso

A fonte de dados JDBC conta com a JNDI, a Interface de Nomenclatura e Diretrio Java. A API JNDI fornece uma maneira uniforme de as aplicaes encontrarem e acessarem as fontes de dados. Para obter mais informaes, consulte Tutorial do JNDI. 3. Como opo, adicione uma descrio para a fonte de dados. Por exemplo, digite: Accesses

the database that provides data for the IFPWAFCAD application.

4. 5. Clique em Prximo e em Prximo novamente para ignorar a etapa 3, Propriedades Adicionais. Na Etapa 4, digite IfpwafcadPool para Nome do Pool de Conexes JDBC. Certifique-se de que a opo Extrair da Conexo Existente esteja selecionada e escolhajdbc:mysql://localhost:3306/MyNewDatabase na lista drop-down. Clique em Prximo.

Observao: O assistente detecta as conexes de banco de dados que tenham sido configuradas no IDE. Portanto, neste ponto, necessrio que voc j tenha criado uma conexo ao banco de dadosMyNewDatabase. Voc pode verificar as conexes que foram criadas ao abrir a janela Servios (Ctrl-5; &8984-5 no Mac) e procurar ns de conexo ( Bancos de Dados. 6. Na Etapa 5, selecione javax.sql.ConnectionPoolDataSource na lista drop-down Tipo de Recurso. Observe que o IDE extrai informaes da conexo de banco de dados especificada na etapa anterior e define as propriedades de nome e valor para o novo pool de conexes. ) na categoria

7.

Clique em Finalizar. O assistente gera um arquivo glassfish-resources.xml que contm entradas para a fonte de dados e o pool de conexes especificados.

Na janela Projetos, voc pode abrir o arquivo glassfish-resources.xml recm-criado em Recursos do Servidor e observar que, nas tags <resources>, foram declarados uma fonte de dados e um pool de conexes com os valores previamente especificados. Para confirmar se uma nova fonte de dados e um pool de conexes esto realmente registrados no GlassFish Server, voc pode implantar o projeto no servidor e, em seguida, localizar os recursos na janela Servios do IDE: 1. Na janela Projetos, clique com o boto direito do mouse no n do projeto IFPWAFCAD e selecione Implantar. O servidor ser iniciado caso no esteja em execuo e o projeto ser compilado e implantado nele. 2. Abra a janela Servios (Ctrl-5; &#8984-5 no Mac) e expanda os ns Servidores > GlassFish > Recursos > JDBC > Recursos JDBC e Pools de Conexes. Observe que a nova fonte de dados

e o pool de conexes agora so exibidos:

Fazendo referncia fonte de dados da aplicao

necessrio fazer referncia ao recurso JDBC que acabou de configurar na aplicao Web. Para isso, voc pode criar uma entrada no descritor de implantao web.xml da aplicao. Os descritores de implantao so arquivos de texto com base em XML que contm informaes que descrevem como uma aplicao deve ser implantada em um ambiente especfico. So usados normalmente, por exemplo, para especificar os parmetros de contexto da aplicao, os padres de comportamento e as configuraes de segurana, bem como mapeamentos para servlets, filtros e listeners. Observao. Se voc tiver especificado o Java EE 6 ou Java EE 7 como a verso Java ao criar o projeto, ser necessrio criar o arquivo descritor de implantao selecionando Web > Descritor de Implantao Padro, no assistente de Novo Arquivo. Execute as etapas a seguir para fazer referncia fonte de dados no descritor de implantao da aplicao. 1. Na janela Projetos, expanda a pasta Arquivos de Configurao e clique duas vezes em web.xml para abrir o arquivo no editor. 2. 3. Clique na guia Referncias localizada na parte superior do editor. Expanda o cabealho Referncias de Recurso e clique em Adicionar para abrir a caixa de dilogo Adicionar Referncia 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). 5. Digite javax.sql.ConnectionPoolDataSource no campo Tipo de Recurso. Clique em OK. O campo Descrio opcional, mas voc pode inserir uma descrio do recurso que seja legvel pelo usurio, por exemplo, Banco de Dados da aplicao IFPWAFCAD.

O novo recurso agora ser listado abaixo do cabealho Referncias de Recursos. 6. Para verificar se o recurso foi adicionado ao arquivo web.xml, clique na guia Cdigo-fonte localizada na parte superior do editor. Observe que as tags < resource-ref> a seguir agora esto includas.

7. <resource-ref> 8. <description>Database for IFPWAFCAD application</description> 9. <res-ref-name>jdbc/IFPWAFCAD</res-ref-name> 10. <res-type>javax.sql.ConnectionPoolDataSource</res-type> 11. <res-auth>Container</res-auth> 12. <res-sharing-scope>Shareable</res-sharing-scope> </resource-ref>

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

A adio 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 necessrio localizar o diretrio de instalao do driver do banco de dados e copiar o arquivo mysql-connector-java-5.1.6-bin.jar do diretrio raiz do driver na pasta da biblioteca do servidor que estiver utilizando. Felizmente, o gerenciamento de servidor do IDE capaz de detectar na implantao se o arquivo JAR foi adicionado e, caso no tenha sido, ele o adiciona automaticamente. Para demonstr-lo, abra o gerenciador Servidores (Selecione Ferramentas > Servidores). O IDE fornece uma opo de implantao do driver JDBC. Se a opo estiver ativada, ela iniciar uma verificao para determinar se sero necessrios drivers para as aplicaes implantadas do servidor. No caso do MySQL, se o driver for necessrio e no for encontrado, o driver incorporado do IDE ser implantado no local adequado do servidor. 1. Selecione Ferramentas > Servidores para abrir o gerenciador Servidores. Selecione o servidores do GlassFish Server no painel esquerdo.

2.

No painel principal, selecione a opo Ativar Implantao do Driver JDBC.

3.

Antes de fechar o gerenciador de Servidores, anote o caminho indicado no campo de texto da pasta Domnios. Ao se conectar ao GlassFish Server no IDE, voc est se conectando, na realidade, a uma instnciado servidor de aplicaes. Cada instncia executa aplicaes em um domnio exclusivo e o campo Nome do Domnio indica o nome do domnio que o servidor est utilizando. Conforme mostrado na imagem acima, o arquivo JAR do driver dever estar localizado em domain1, que o domnio default criado na instalao do GlassFish Server.

4. 5.

Clique em Fechar para sair do gerenciador Servidores. No computador, v at o diretrio de instalao do GlassFish Server e entre na subpasta domnios > domain1 > lib. . Como voc j deve ter implantando o projeto IFPWAFCAD no servidor, voc ver o arquivo mysql-connector-java-5.1.6-

bin.jar. Se voc no vir o arquivo JAR do driver, execute a etapa a seguir.

6. Implante seu projeto no servidor. Na janela Projetos do IDE, selecione Implantar no menu de contexto do n do projeto. Voc pode ver o progresso na janela de Sada do IDE (Ctrl-4; &#89844 no Mac). A sada indica que o driver MySQL est implantado no GlassFish Server.

Agora, se voc voltar subpasta domain1/lib no computador, voc ver que o arquivo mysql-connector-java-5.1.6.x-bin.jar foi adicionado automaticamente.

Adicionando Lgica Dinmica

Retornando aos espaos reservados index.jsp e response.jsp que voc criou anteriormente no tutorial, voc pode implementar o cdigo JSTL que permite s pginas gerar contedo dinamicamente, ou seja, com base na entrada do usurio. Para isso, execute as trs tarefas a seguir. 1. 2. Adicione a biblioteca JSTL ao classpath do projeto Implemente cdigo JSTL

Adicionando a biblioteca JSTL ao classpath do projeto

possvel aplicar a JavaServer Pages Standard Tag Library (JSTL) para acessar e exibir dados obtidos do banco de dados. O GlassFish Server inclui a biblioteca JSTL por default. Voc pode verificar isso expandindo o n do GlassFish Server no n de Bibliotecas, na janela Projetos e procurando a biblioteca javax.servlet.jsp.jstl.jar. (As verses mais antigas do GlassFish server usam a biblioteca jstl-impl.jar.) Como as bibliotecas do GlassFish Server so, por default, adicionadas ao classpath do projeto, no necessrio executar nenhuma etapa dessa tarefa. A JSTL fornece as seguintes quatro reas bsicas de funcionalidade.

core: tarefas comuns e estruturais, como iteradores e condicionais para manipular controle de fluxo fmt: formatao da mensagem de internacionalizao e localizao sql:acesso a banco de dados simples xml: manipulao de contedo XML
Este tutorial foca no uso das bibliotecas de tags core e sql.

Implementando o cdigo JSTL

Agora voc pode implementar o cdigo que recupera, de maneira dinmica, os dados, exibindo-os para cada pgina. As duas pginas requerem que voc implemente uma consulta SQL que utilize a fonte de dados criada anteriormente no tutorial. O IDE fornece vrios snippets de JSTL especficos do banco de dados que podem ser selecionados na Paleta (Ctrl-Shift-8; &#8984-Shift-8 no Mac).

index.jsp
Para exibir dinamicamente o contedo do form no index.jsp, voc precisa acessar os names da tabela de banco de dados Subject. 1. Coloque o mouse sobre o item Relatrio do BD na Paleta.

O item Relatrio do BD utiliza a tag <sql:query> para criar uma consulta SQL e, em seguida, utiliza a tag <c:forEach> para passar pelo resultsetda consulta e obter os dados recuperados. 2. Coloque o cursor acima da declarao <%@page ... %> (linha 7) e, em seguida, clique duas vezes no item Relatrio do BD na Paleta. Na caixa de dilogo que exibida, insira os seguintes detalhes:

Nome da Varivel: subjects Escopo: page Fonte de Dados: jdbc/IFPWAFCAD Instruo da Consulta: SELECT subject_id, name FROM Subject

3.

Clique em OK. O contedo a seguir gerado no arquivo index.jsp. (Novo contedo mostrado em negrito.)

4. <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 5. <%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%> 6. <%-7. Document : index 8. Author : nbuser 9. --%> 10. 11. <sql:query var="subjects" dataSource="jdbc/IFPWAFCAD"> 12. SELECT subject_id, name FROM Subject 13. </sql:query> 14. 15. <table border="1"> 16. <!-- column headers --> 17. <tr> 18. <c:forEach var="columnName" items="${subjects.columnNames}"> 19. <th><c:out value="${columnName}"/></th> 20. </c:forEach> 21. </tr> 22. <!-- column data --> 23. <c:forEach var="row" items="${subjects.rowsByIndex}">

24. <tr> 25. <c:forEach var="column" items="${row}"> 26. <td><c:out value="${column}"/></td> 27. </c:forEach> 28. </tr> 29. </c:forEach> 30. </table> 31. 32. <%@page contentType="text/html" pageEncoding="UTF-8"%> 33. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Observe que o IDE adicionou automaticamente as diretivas taglib necessrias para as tags JSTL utilizadas no contedo gerado <sql:query> e <c:forEach>). Uma diretiva taglib declara que a pgina do JSP utiliza tags personalizadas (por exemplo, JSTL),
nomeia a biblioteca de tags que as define e especifica seu prefixo de tag. 34. Execute o projeto para ver como ele exibido no browser. Clique com o boto direito do mouse no n na janela Projetos e selecione Executar. Quando voc seleciona Executar, o IDE implanta o projeto no GlassFish Server, a pgina de ndice compilada em um servlet e a pgina de boas-vindas aberta no browser default. O cdigo gerado do item Relatrio de BD cria a tabela a seguir na pgina de boas-vindas.

Como podemos ver, o item Relatrio de BD permite testar rapidamente a conexo do banco de dados e permite, tambm, exibir os dados da tabela do banco de dados no browser. Isso pode ser particularmente til ao se fazer prottipos. As etapas a seguir demonstram como integrar o cdigo gerado lista drop-down HTML criada anteriormente no tutorial.

35. Examine os dados da coluna no cdigo gerado. Duas tags <c:forEach> so utilizadas, uma est aninhada dentro da outra. Isso faz com que o continer JSP (por exemplo, o GlassFish Server) execute um loop em todas as linhas da tabela e, para cada linha, ele executa um loop em todas as colunas. Dessa maneira, os dados da tabela inteira so exibidos. 36. Integre as tags <c:forEach> no form HTML, conforme a seguir. O valor de cada item se torna subject_id e o texto de sada se torna o name, conforme registrado no banco de dados. (As alteraes so exibidas em negrito).

37. <form action="response.jsp"> 38. <strong>Select a subject:</strong> 39. <select name="subject_id"> 40. <c:forEach var="row" items="${subjects.rowsByIndex}"> 41. <c:forEach var="column" items="${row}"> 42. <option value="<c:out value="${column}"/>"><c:out value="${column}"/></option> 43. </c:forEach> 44. </c:forEach> 45. 46. </select> <input type="submit" value="submit" name="submit" /> </form> Uma maneira alternativa e mais simples de integrar as tags <c:forEach> ao form HTML seria
a seguinte:

<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 tags <c:forEach> executam loop em todos os valores de subject_id e name da consulta SQL e inserem cada par nas tags <option> HTML.
Dessa maneira, a lista drop-down do form preenchida com dados. 47. Delete a tabela que foi gerada a partir do item Relatrio de BD. (A excluso mostrada a seguir como texto tachado.)

48. 49. 50. 51. 52. 53. 54. 55. 56.

<%@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">

57. SELECT subject_id, name FROM Subject 58. </sql:query> 59. 60. <table border="1"> 61. <!-- column headers --> 62. <tr> 63. <c:forEach var="columnName" items="${subjects.columnNames}"> 64. <th><c:out value="${columnName}"/></th> 65. </c:forEach> 66. </tr> 67. <!-- column data --> 68. <c:forEach var="row" items="${subjects.rowsByIndex}"> 69. <tr> 70. <c:forEach var="column" items="${row}"> 71. <td><c:out value="${column}"/></td> 72. </c:forEach> 73. </tr> 74. </c:forEach> 75. </table> 76. 77. <%@page contentType="text/html" pageEncoding="UTF-8"%> 78. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
79. Salve as alteraes (Ctrl-S; &#8984-S no Mac). 80. Atualize a pgina de boas-vindas do projeto no browser. Note que a lista drop-down do browser contm, agora, nomes de assuntos que foram recuperados do banco de dados. Voc no precisa reimplantar seu projeto porque a opo de compilao ao salvar est ativada para seu projeto, por default. Isso significa que, quando voc modifica e salva um arquivo, ele automaticamente compilado e implantado, e no necessrio recompilar o projeto inteiro. possvel ativar e desativar compilar ao salvar para seu projeto na categoria Compilar da janela Propriedades do projeto.

response.jsp
A pgina de resposta fornece detalhes para o conselheiro que corresponde ao assunto escolhido na pgina de boas-vindas. A consulta criada dever selecionar o registro do conselheiro cujo counselor_idcorresponda ao counselor_idfk do registro do assunto selecionado. 1. Coloque seu cursor acima da declarao <%@page ... %> (linha 7) e clique duas vezes na Consulta do DB na Paleta para abrir a caixa de dilogo Inserir Consulta do BD. 2. Informe os seguintes detalhes na caixa de dilogo Inserir Consulta DB. Nome da Varivel: counselorQuery Escopo: page Fonte de Dados: jdbc/IFPWAFCAD

Instruo de Consulta: SELECT * FROM Subject, Counselor WHERE

Counselor.counselor_id = Subject.counselor_idfk AND Subject.subject_id = ? <sql:param value="${param.subject_id}"/>

3.

Clique em OK. O contedo a seguir gerado no arquivo response.jsp. (Novo contedo mostrado em negrito.)

4. <%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%> 5. <%-6. Document : response 7. Created on : Dec 22, 2009, 8:52:57 PM 8. Author : nbuser 9. --%> 10. 11. <sql:query var="counselorQuery" dataSource="jdbc/IFPWAFCAD"> 12. SELECT * FROM Subject, Counselor 13. WHERE Counselor.counselor_id = Subject.counselor_idfk 14. AND Subject.subject_id = ? <sql:param value="${param.subject_id}"/> 15. </sql:query> 16. 17. <%@page contentType="text/html" pageEncoding="UTF-8"%> 18. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Observe que o IDE adicionou automaticamente a diretiva taglib necessria para a tag <sql:query>. Alm disso, observe que voc utilizou uma tag <sql:param> diretamente na consulta. Como essa consulta conta com o valor subject_id que foi submetido de index.jsp, possvel extrair o valor utilizando uma instruo EL (Linguagem de Expresso) na forma de ${param.subject_id} e, em seguida, pass-lo para a tag <sql:param>, para que ele possa ser utilizado no local do ponto de interrogao da SQL (?) durante o runtime. 19. Utilize uma tag <c:set> para definir uma varivel que corresponda ao primeiro registro (ou seja, linha) do resultset retornado da consulta. (Novo contedo mostrado em negrito.)

20. <sql:query var="counselorQuery" dataSource="jdbc/IFPWAFCAD"> 21. SELECT * FROM Subject, Counselor 22. WHERE Counselor.counselor_id = Subject.counselor_idfk 23. AND Subject.subject_id = ? <sql:param value="${param.subject_id}"/> 24. </sql:query> 25. <c:set var="counselorDetails" value="${counselorQuery.rows[0]}"/>
Embora o resultset retornado da consulta deva conter apenas um nico registro, est uma etapa necessria, pois a pgina precisa acessar valores do registro utilizando instrues EL (Linguagem de Expresso). Lembre-se que no index.jsp voc podia acessar valores do resultset simplesmente utilizando uma tag <c:forEach>. No entanto, a tag <c:forEach> opera definindo uma varivel para linhas contidas na consulta, permitindo, assim, extrair valores incluindo a varivel da linha nas instrues EL. 26. Adicione a diretiva taglib para a biblioteca core do JSTL na parte superior do arquivo, para que a tag <c:set> seja entendida. (Novo contedo mostrado em negrito.)

27. <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>

28. Na marcao HTML, substitua todos os espaos reservados por cdigo de instrues EL que exibem os dados contidos na varivel counselorDetails. (Alteraes mostradas a seguir em negrito):

29. <html> 30. <head> 31. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 32. <link rel="stylesheet" type="text/css" href="style.css"> 33. <title>${counselorDetails.name}</title> 34. 35. 36. 37. 38. 39. 40. </head> <body> <table> <tr> <th colspan="2">${counselorDetails.name}</th> </tr>

41. 42. 43. 44. 45. 46. 47.

<tr> <td><strong>Description: </strong></td> <td><span style="font-size:smaller; fontstyle: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; fontstyle: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>

48. 49. 50. 51. 52. 53. 54.

55. 56. 57. 58.

Executando a Aplicao Pronta

Voc, agora, concluiu a aplicao. Tente execut-lo novamente para ver como ele exibido no browser. Observe que, graas funcionalidade Compilar ao Salvar do NetBeans, voc no precisa se preocupar com a compilao ou reimplantao da aplicao. Assim, ao executar um projeto, voc ter certeza de que a implantao contm as alteraes mais recentes. Clique no boto ( ) Executar Projeto na barra de ferramentas principal. A pgina index.jsp ser

aberta no browser default do IDE. Quando index.jsp for exibido no browser, selecione um assunto na lista drop-down e clique em submit. Voc ser direcionado pgina response.jsp, mostrando os detalhes correspondentes sua seleo.

Isso conclui o tutorial Criando uma Aplicao Web Simples Usando um Banco de Dados MySQL Este documento demonstra como criar uma aplicao Web simples que se conecta a um banco de dados MySQL. Este tutorial tambm demonstrou como construir uma aplicao utilizando uma arquitetura bsica de duas camadas e utilizou vrias tecnologias, incluindo JSP, JSTL, JDBC e JNDI, como uma forma de acessar e exibir dinamicamente os dados.

Soluo de Problemas
A maioria dos problemas que ocorrem com a aplicao do tutorial so devidos a dificuldades de comunicao entre o GlassFish Server Open Source Edition e o servidor de banco de dados MySQL. Se a sua aplicao no for exibida corretamente, ou se voc estiver recebendo um erro de servidor, os testes a seguir podero ser teis.

Existem recursos do banco de dados? O pool de conexes e a fonte de dados existem no servidor? O driver MySQL Connector/J est acessvel ao GlassFish Server? O banco de dados protegido por senha? As propriedades do pool de conexes esto definidas corretamente?

Existem recursos do banco de dados?

Utilize a janela Servios do IDE (Ctrl-5; &#8984-5 no Mac) para garantir que o servidor MySQL esteja em execuo e que o MyNewDatabase esteja acessvel e contenha os dados da tabela adequados.

Para conectar-se ao servidor de banco de dados MySQL, clique com o boto direito do mouse no n Servidor MySQL e selecione Conectar. Se um n de conexo ( ) para o MyNewDatabase no for exibido na janela Servios, voc poder ) e selecionando a

criar uma conexo clicando com o boto direito do mouse no n do driver MySQL ( opo Conectar Usando. Insira os detalhes necessrios na caixa de dilogo exibida.

Os campos fornecidos na caixa de dilogo Nova Conexo de Banco de Dados espelham a string de URL inserida na opo Mostrar URL do JDBC. Portanto, se voc souber o URL (por exemplo,jdbc:mysql://localhost:3306/MyNewDatabase) voc poder col-lo no campo Mostrar URL do JDBC e os campos remanescentes da caixa de dilogo sero automaticamente preenchidos.

Para garantir que as tabelas Subject e Counselor existam e que contenham dados de amostra, expanda o n de conexo MyNewDatabase ( catlogo MyNewDatabase ( ) e localize o n do ). Expanda o n de catlogo para exibir as tabelas existentes. Voc

pode exibir os dados da tabela clicando com o boto direito do mouse em um n da tabela e selecionando

Exibir Dados.

O pool de conexes e a fonte de dados existem no servidor?

Aps a implantao da aplicao no GlassFish Server, sun-resources.xml contido no projeto dever instruir o servidor a criar um recurso e um pool de conexes JDBC. possvel determinar se eles existem no n Servidores na janela Servios.

Expanda o n Servidores > GlassFish Server > Recursos. Expanda Recursos JDBC para exibir a fonte de dados jdbc/IFPWAFCAD criada de glassfish-resources.xml. Expanda o n Pools de Conexes para exibir o pool de conexes IfpwafcadPool criado a partir de glassfish-

resources.xml. (Isso est demonstrado acima.)

O driver MySQL Connector/J est acessvel para o GlassFish Server?

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

Localize a pasta de instalao do GlassFish Server no computador e faa uma anlise detalhada da subpasta GlassFish domains/domain1/lib. Aqui voc 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 GlassFish Server funcione adequadamente neste tutorial. Se voc estiver utilizando a conta MySQL root sem senha, voc poder definir a senha usando um prompt de linha de comandos.

Para definir sua senha como nbuser, navegue para o diretrio bin de instalao do MySQL no prompt de linha de comandos e insira o seguinte:

shell> mysql -u root

mysql> UPDATE mysql.user SET Password = PASSWORD('nbuser') -> WHERE User = 'root'; mysql> FLUSH PRIVILEGES;
Para mais informaes, consulte o Manual de Referncia MySQL oficial: Proteo das Contas MySQL Iniciais.

As propriedades do pool de conexes esto definidas corretamente?

Certifique-se de que o pool de conexes esteja funcionando corretamente para o servidor. 1. 2. Abra a janela Servios (Ctrl-5; &#8984-5 no Mac) e expanda o n Servidores. Clique com o boto direito do mouse no n do GlassFish Server e selecione Exibir Console de Administrao 3. Informe o nome do usurio e a senha se for solicitado. Voc pode exibir o nome de usurio e senha no gerenciador de Servidores. 4. Na rvore esquerda da console, expanda o n Recursos > JDBC > Pools de Conexes de JDBC > IfpwafcadPool. OS detalhes do pool de conexes IfpwafcadPool so exibidos na janela principal. 5. Clique no boto Ping. Se o pool de conexes estiver configurado adequadamente, voc ver uma mensagem "Ping Bem-sucedido".

6.

Se o ping falhar, clique na guia Propriedades Adicionais e verifique se os valores da propriedade listados esto corretamente definidos.