quarta-feira, 11 de setembro de 2013

Aplicação completa com JSP e Banco de Dados- Parte I





Fala galera!!!! \0/ . Devido o grande sucesso do post sobre JSF e JSP, venho aqui mostrar à vocês uma aplicação em JSP com banco de dados. Vamos à brincadeira que daqui à pouco tenho que voltar a mexer em um chat maldito que anda tirando meu sono. Lets go!

1.Escolhendo e configurando o Bando de Dados

Primeiramente você precisa escolher o banco de dados e como exemplo vamos utilizar o MySQL.

Caso você não o tenha, faça o download no site http://dev.mysql.com/downloads, é muito simples de instalar e de usar.


Após instalado, para executar o MySQL utilize o executável WinMySQLAdmin.exe localizado na pasta C:\mysql\bin, em seguida aparecerá o icone de semaforo na barra de tarefas próximo ao relógio.


Após instalado e funcionando é necessário configura-lo, para isso, digite para Host Name ?localhost?e para User Name e Password ?root?, para rodar na máquina local.


Em seguida é necessário criar a base de dados e a tabela, você pode utilizar qualquer programa de manipulação, vamos utilizar o MySQL Control Center, disponível também no site Mysql http://dev.mysql.com/downloads/other/mysqlcc.html.


Como exemplo crie uma base de dados com o nome ?teste? e em seguida vamos criar uma tabela chamada pessoa com as colunas nome, idade e sexo.


Agora estamos prontos pra utilizar nossa base de dados.



2.Configurando o servidor para rodar o JSP

JSP (Java Server Pages) são códigos que quando combinados com tags HTML produzem páginas dinâmicas, que são processadas pelo servidor.


Como servidor, podemos utilizar o Jakarta-Tomcat que pode ser encontrado no site http://jakarta.apache.org/tomcat/ou o Jboss com Tomcat encontrado no site http://www.jboss.org/downloads/index. Caso não tiver, basta instalá-lo.



Então, o primero passo é configurar o servidor para podermos executar essas páginas dinâmicas.



Caso tenha escolhido o Tomcat, é necessário inicia-lo executando o arquivo C:\Tomcat 5.0\bin\startup.bat, onde abrirá uma janela mostrando a inicialização, demora um pouco, mas depois você já pode executar seus arquivos JSP, para isso grave seus arquivos JSP dentro do caminho C:\Tomcat 5.0\webapps\ROOT\ , e execute os mesmos através do browser digitando o caminho http://localhost:8080/ , por exemplo, caso crie um arquivo teste.jsp, o mesmo seria gravado no caminho C:\Tomcat 5.0\webapps\ROOT\teste.jsp e depois seria executado no browser através do endereço http://localhost:8080/teste.jsp, e quando quiser encerrar o Tomcat execute o arquivo C:\Tomcat 5.0\bin\shutdown.bat.



Caso tenha escolhido o Jboss, é bem parecido com o Tomcat, pois o Jboss tem o Tomcat integrado e da mesma forma é necessário inicializar o servidor através do arquivo C:\jboss-3.0.8_tomcat-4.1.24\bin\run.bat, então cria uma pasta dentro do caminho C:\jboss-3.0.8_tomcat-4.1.24\server\default\deploy\ com a extensão .war. Por exemplo, caso queira criar uma pasta teste, ficaria da seguinte forma, C:\jboss-3.0.8_tomcat-4.1.24\server\default\deploy\teste.war e aqui dentro ficarão nossos arquivos JSP.



Vamos utilizar o Jboss para nossa implementação e vamos fazer um exemplo simples para testar o servidor, crie a pasta teste.war e em seguida crie uma página simples e salve dentro da pasta teste.war.


Então inicie o servidor e em seguida digite o endereço http://localhost:8080/teste/teste.jsp no browser. Aqui a pasta teste não precisa vir acompanhado da extensão .war.
Note que os códigos JSP estão entre <% e %>, e se tudo der certo você verá a mensagem do código JSP na tela.


Para encerrar o Jboss execute o C:\jboss-3.0.8_tomcat-4.1.24\bin\shutdown.bat
Caso você esteja tendo algum problema tente encerrar o jboss ou tomcat e inicializa-lo novamente.

3. Acessando o MySQL através do JSP utilizando o servidor Jboss com Tomcat integrado.

Agora vamos testar a conexão com o Banco MySQL através do JSP. Inicialmente precisamos baixar o driver do MySQL, que é um arquivo .jar disponível no site http://dev.mysql.com/downloads/e copia-lo na pasta C:\jboss-3.0.8_tomcat-4.1.24\server\default\lib.


Vamos desenvolver uma página pra testar a conexão com o banco MySQL e salvar com o nome testeConexao.jsp na pasta C:\jboss-3.0.8_tomcat-4.1.24\server\default\deploy\teste.war criada anteriormente.



 <%@ page contentType="text/html"%>   
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   
 <html>   
 <head>   
 <title>Teste JSP</title>   
 </head>   
 <body>   
   <%out.println("Teste efetuado com sucesso");%>   
 </body>   
 </html>  




Então inicia o MySQL, em seguida inicia o servidor Jboss e executa no browser o endereço http://localhost:8080/teste/testeConexao.jsp. Caso funcione aparecerá na tela a mensagem ?Conexão efetuada com sucesso?.


4. Utilizando JSP para acessar Javabeans

Javabeans nada mais é do que arquivos Java acessados através de páginas dinâmicas, ou seja, através do JSP. Nosso propósito será acessar um Javabeans para fazer toda a manipulação do banco, mas antes vamos testar um exemplo simples.
Inicialmente vamos fazer uma aplicação em java seguindo algumas convenções, ?get? para obter dados e ?set? para atribuir dados. Para isso podemos utilizar qualquer editor, inclusive o bloco de notas.



package testeBean;  
  
public class TesteBean {  
     
   String txt = "";  
     
   public void setTexto(String texto){  
      txt = texto;  
   }  
     
   public String getTexto(){  
      return txt;  
   }     
}  




Então dentro da pasta teste.war criamos uma pasta chamada WEB-INF, que é onde serão procurados todos os JavaBenas e dentro da pasta WEB-INF será criada a pasta classes e a pasta lib. Na pasta classes poderemos gravar os arquivos com extensão .class e na pasta lib podemos gravar os arquivos com extensão .jar. Sempre salve os Javabeans dentro de pacotes para evitar transtornos.

Vamos criar um arquivo .jar desse exemplo e salva-la como testeBean.jar na pasta lib, ficando da seguitne maneira C:\jboss-3.0.8_tomcat-4.1.24\server\default\deploy\teste.war\WEB-INF\lib\testeBean.jar ou caso preferir pode gravar o pacote testeBean todo dentro da pasta classes C:\jboss-3.0.8_tomcat-4.1.24\server\default\deploy\teste.war\WEB-INF\classes\testeBean\TesteBean.class.

Agora dentro da pasta teste.war iremos criar o arquivo JSP que irá chamar o Javabeans. Salve o mesmo como testeBean.jsp.



<jsp:useBean id="testeObj" class="testeBean.TesteBean">  
<jsp:setProperty name="testeObj" property="texto" value="Testando..."/>  
</jsp:useBean>  
  
<html>  
   <head>  
      <title>Teste Jsp</title>  
   </head>  
     
   <body>  
      <h1>Teste JSP</h1>  
      <p>A mensagem teste é:  
         <jsp:getProperty name="testeObj" property="texto"/>  
      </p>  
   </body>  
</html>  


O comandocria um objeto ?testeObj? da classe TesteBean. O comandoatravés do objeto ?testeObj? utiliza o setProperty para chamar o método setTexto, que associa o property=?texto? ao setProperty e chama o método setTexto do Javabeans passando como parametro o valor ?Testando...?. O mesmo ocorre para o comandoque chama o método getTexto, imprimindo a variável ?txt? do Javabeans na tela.


Você também pode utilizar o objeto criado para chamar os métodos do Javabeans sem utilizar getProperty, colocando o código JSP entre <% e %>, por exemplo poderiamos chamar o método getTexto da seguinte forma <%=TesteObj.getTexto()%>, utilizando o sinal de = para imprimir na tela, ou mandar imprimir utilizando o código <%out.print(TesteObj.getTexto())%>, já que o método getTexto() retorna uma string.


Então inicia o servidor Jboss e executa no browser o endereço http://localhost:8080/teste/testeBean.jsp. Caso imprimir a mensagem ?Testando...? na tela, a chamada ao Javabeans ocorreu corretametne.


5. Utilizando JSP e Javabeans para acessar o MySQL

Agora vamos aperfeiçoar nosso exemplo de conexão com banco de dados, fazendo com que o Javabeans faça a conexão e o JSP acesse o resultado através do mesmo.
Primeiramente vamos criar um JavaBeans para fazer a conexão, bem parecido com o JSP que fizemos anteriormente.



package conexao;  
  
import java.sql.*;  
  
public class Conexao {  
     
   public Connection con;  
   public Statement stm;  
   private String sit = "";  
   
   public Conexao() {  
  
      try {  
  
         Class.forName("org.gjt.mm.mysql.Driver");  
         con = DriverManager.getConnection("jdbc:mysql://localhost:3306/teste","root","root");  
         stm = con.createStatement();   
  
         sit = "Conexão efetuada com sucesso";  
  
           
      } catch (Exception e) {  
         sit = "não foi possível conectar ao banco" + e.getMessage();  
      }  
   }  
     
   public String getSituacao(){  
      return sit;     
   }  
}  



Então da mesma forma mostrada anteriormente salve o Javabeans como Conexao.jar dentro da pasta teste.war\WEB-INF\lib e crie um arquivo JSP e salve como conexao.jsp dentro da pasta teste.war.



package conexao;  
  
import java.sql.*;  
  
public class Conexao {  
     
   public Connection con;  
   public Statement stm;  
   private String sit = "";  
   
   public Conexao() {  
  
      try {  
  
         Class.forName("org.gjt.mm.mysql.Driver");  
         con = DriverManager.getConnection("jdbc:mysql://localhost:3306/teste","root","root");  
         stm = con.createStatement();   
  
         sit = "Conexão efetuada com sucesso";  
  
           
      } catch (Exception e) {  
         sit = "não foi possível conectar ao banco" + e.getMessage();  
      }  
   }  
     
   public String getSituacao(){  
      return sit;     
   }  
}  


Então inicia o Jboss e executa no browser o endereço http://localhost:8080/teste/conexao.jsp. Caso funcione, estamos prontos para começar desenvolver a aplicação em si.


6. Desenvolvimento da aplicação


Agora você poderá implementar os códigos seguintes. Vamos fazer uma breve explicação sobre cada um, cabendo a você analisar o código para entender suas funções.


Conexao.java

Vamos aperfeiçoar ainda mais o Javabeans anterior fazendo com que ele seja responsável por toda manipulação no banco de dados e salva-lo como Conexao.jar na pasta lib.



package conexao;  
  
import java.sql.*;  
  
public class Conexao {  
     
   public Connection con;  
   public Statement stm;  
   public ResultSet res = null;  
   private String nome = null;  
   private int idade = 0;  
   private String sexo = null;  
  
   public Conexao() {  
  
      try {  
  
         Class.forName("org.gjt.mm.mysql.Driver");  
         con =  
            DriverManager.getConnection(  
              "jdbc:mysql://localhost:3306/teste",  
              "root",  
              "root");  
         stm = con.createStatement();   
           
      } catch (Exception e) {  
         System.out.println("não foi possível conectar ao banco" + e.getMessage());  
      }  
   }  
     
   public void setNome(String nome){  
      this.nome = nome;  
   }  
        
   public void setIdade(int idade){  
      this.idade = idade;  
   }  
  
   public void setSexo(String sexo){  
      this.sexo = sexo;  
   }  
  
   public String getNome(){  
      return nome;  
   }  
  
   public int getIdade(){  
      return idade;  
   }  
        
   public String getSexo(){  
      return sexo;  
   }  
  
   public void inserirDados(){  
     
      try {  
         String query = "insert into pessoa(nome,idade,sexo) values(\""+nome+"\","+idade+",\""+sexo+"\")";  
         stm.executeUpdate(query);  
  
      }catch (SQLException e){System.out.println("Erro na inserção:" + e.getMessage());}  
        
   }  
  
   public boolean alterarDados(){  
        
      boolean testa = false;  
     
      try {  
         String query = "update pessoa "+  
                     "set idade = " + idade + ", "+  
                     "sexo = \"" + sexo + "\" " +  
                     "where nome = \"" + nome + "\"";  
  
         int linhas = stm.executeUpdate(query);  
           
         if (linhas > 0)  
            testa = true;  
         else  
            testa = false;  
  
      }catch (SQLException e){System.out.println("Erro na inserção:" + e.getMessage());}  
        
      return testa;  
   }  
     
   public boolean excluirDados(){  
     
    boolean testa = false;  
     
      try {  
         String query = "delete from pessoa where nome='" + nome+"'";  
         int linhas = stm.executeUpdate(query);  
           
         if (linhas > 0)  
            testa = true;  
         else  
            testa = false;  
  
      }catch (SQLException e){System.out.println("Erro na exclusão:" + e.getMessage());}  
        
      return testa;  
   }  
     
   public boolean consultarDados(){  
        
      boolean testa = false;  
           
      try {  
         String query = "select * from pessoa where nome='" + nome+"'";  
         res = stm.executeQuery(query);  
           
         if (res.next()){testa = true;}  
         else{testa = false;}  
           
      }catch (SQLException e){System.out.println("Erro na inserção:" + e.getMessage());}  
        
      return testa;  
   }     
  
   public void setConsulta() {  
        
      try {  
         res = stm.executeQuery("select * from pessoa");  
      }   
      catch (SQLException e){  
         e.printStackTrace();  
      }  
  
   }  
  
   public ResultSet getResultado() {  
      return res;  
   }  
}  




Onde o método construtor será responsável pela conexão ao banco, ou seja, toda vez que for instanciado um objeto dessa classe, o construtor será chamado primeiro e o banco será conectado.

Foram criadas três variáveis privadas nome, idade e sexo, que serão acessadas através dos métodos get e set.
O método inserirDados() é responsável pela inserção no banco, onde será passado como valores as três variáveis privadas.

O método alterarDados() é responsável por atualizar os dados levando em consideração a variável nome, testando se foi encontrado algum registro, retornando assim true ou false.

O método excluirDados(), da mesma forma que o alterarDados(), exclui os dados levando em consideração a variável nome, testando se encontrou algum registro.

O método consultaDados() apenas consulta os dados do banco, também testando se encontrou algum registro.
O método setConsulta() executa uma consulta comum. E o método getResultado() retorna o objeto ResultSet contendo todos os registros do banco.


pessoa.jsp


Agora criaremos um arquivo JSP principal, contendo os campos e botões para inserção, consulta, alteração e exclusão. Chamaremos de pessoa.jsp.

<%@ page contentType="text/html"%>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  
<html>  
<head>  
<title>Tabela Pessoa</title>  
  
  
<script>  
  
function enviar(par){  
     
   if (par == 'cadastrar'){  
     
      if (document.cadastro.nomeField.value == ''){  
         document.cadastro.statusField.value = 'Preencha o campo nome';  
      }else if (document.cadastro.idadeField.value == ''){  
         document.cadastro.statusField.value = 'Preencha o campo idade';  
      }else if (document.cadastro.sexoField.value == ''){  
         document.cadastro.statusField.value = 'Escolha o sexo da pessoa';  
      }else {  
         document.cadastro.action='cadastrar.jsp';  
         document.cadastro.submit();  
      }  
  
   } else if (par == 'consultar'){  
  
      if (document.cadastro.nomeField.value == ''){  
         document.cadastro.statusField.value = 'Preencha o campo nome';  
      }else {  
         document.cadastro.action='consultar.jsp';  
         document.cadastro.submit();  
      }  
  
   } else if (par == 'alterar'){  
  
      if (document.cadastro.nomeField.value == ''){  
         document.cadastro.statusField.value = 'Preencha o campo nome';  
      }else if (document.cadastro.idadeField.value == ''){  
         document.cadastro.statusField.value = 'Preencha o campo idade';        
      }else if (document.cadastro.sexoField.value == ''){  
         document.cadastro.statusField.value = 'Escolha o sexo da pessoa';  
      }else {  
         document.cadastro.action='alterar.jsp';  
         document.cadastro.submit();  
      }  
   } else if (par == 'excluir'){  
  
      if (document.cadastro.nomeField.value == ''){  
         document.cadastro.statusField.value = 'Preencha o campo nome';  
      }else {  
         document.cadastro.action='excluir.jsp';  
         document.cadastro.submit();  
      }  
   } else if (par == 'listar'){  
      document.cadastro.action='listar.jsp';  
      document.cadastro.submit();  
   }  
}  
  
</script>  
  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
<style type="text/css">  
<!--  
.style3 {   font-size: 28px;  
   font-weight: bold;  
}  
-->  
</style>  
</head>  
  
<%  
String nome = request.getParameter("nome");  
String idade = request.getParameter("idade");  
String sexo = request.getParameter("sexo");  
String status = request.getParameter("status");  
%>  
  
<body>  
<form name="cadastro" method="get">  
  
<table width="472" border="0">  
  <tr>  
    <td width="458" height="70" bgcolor="#6699FF"><p align="left" class="style3"> Cadastro pessoa </p>  
    </td>  
  </tr>  
  <tr>  
    <td height="177" bgcolor="#6699FF"><p> <strong>Nome :</strong>  
       <input name="nomeField" type="text" id="nomeField" size="46" value="<%=(nome==null)?"":nome%>"> </p>  
         <p> <strong>Idade :</strong>  
       <input name="idadeField" type="text" id="idadeField" size="10" value="<%=(idade==null)?"":idade%>">  
               <strong>Sexo:</strong>   
  
        <input name="sexoField" type="text" id="sexoField" size="6" value="<%=(sexo==null)?"":sexo%>">  
          
  
         </p>      
   </td>  
  </tr>  
  <tr>  
    <td height="101" bgcolor="#6699FF"><p>   
        <input type="button" onClick="enviar('cadastrar')" name="bt1" value="cadastrar">  
        <input type="button" onClick="enviar('consultar')" name="bt2" value="consultar">  
        <input type="button" onClick="enviar('alterar')" name="bt3" value="alterar">  
        <input type="button" onClick="enviar('excluir')" name="bt4" value="excluir">  
        <input type="button" onClick="enviar('listar')" name="bt5" value="listar">  
      </p>  
      <p> <strong>Status:  
   <input name="statusField" disabled type="text" id="statusField" size="46" value="<%=(status==null)?"":status%>">  
      </strong></p>  
   </td>  
  </tr>  
</table>  
</form>  
</body>  
</html>  




Essa página é uma tela simples com alguns textFields e botões. Os botões utilizam o método onclick para chamar a função enviar(par) escrita em javascript, onde de acordo com cada botão pressionado, é chamado uma página diferente, e aproveitamos também para testar se o campos estão vazios de acordo com cada solicitação.
Note que há um trecho JSP <% String nome = request.getParameter("nome"); %>, que será usado para recuperar os parametros de outras páginas, onde serão melhor visiveis mais a frente.


cadastrar.jsp


Quando pressionamos o botão cadastrar, é necessário que todos os campos em pessoa.jsp estejam preenchidos, então é chamado a página cadastrar.jsp

<%@ page contentType="text/html" language="java" import="java.sql.*"%>  
<jsp:useBean id="con" class="conexao2.Conexao"/>  
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Cadastrar</title>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
</head>  
  
<body>  
<form name="form1" method="post" action="pessoa.jsp">  
  
<p><strong>Tabela Pessoa </strong></p>  
<table border=1 cellspacing=0 cellpadding=0 >  
  
   <tr>  
    <td width=200><strong>  
      Nome  
   </strong></td>      
   <td width=50><strong>  
      Idade  
   </strong></td>      
   <td width=30><strong>  
      Sexo  
   </strong></td>  
   </tr>  
  
  
<%      
   try {  
  
      con.setNome(request.getParameter("nomeField"));  
      con.setIdade(Integer.parseInt(request.getParameter("idadeField")));  
      con.setSexo(request.getParameter("sexoField"));  
      con.inserirDados();  
                 
      con.setConsulta();  
      ResultSet temp = con.getResultado();  
      temp.next();  
        
      if(request.getParameter("nomeField").equals(temp.getString("nome")))  
         response.sendRedirect("http://localhost:8080/teste/pessoa.jsp?status=Registro já existente");  
        
      do{  
      %>  
      <tr>  
          <td width=200>  
               <%out.print(temp.getString("nome"));%>  
         </td>  
          <td width=50>  
               <%out.print(temp.getString("idade"));%>  
         </td>  
          <td width=30>  
               <%out.print(temp.getString("sexo"));%>  
         </td>  
      </tr>  
      <%}while (temp.next());  
     
   }catch (Exception e) {  
      e.printStackTrace();  
   }  
     
%>  
</table>  
  <p> </p>  
  <p>  
    <input type="submit" name="Submit" value="voltar">  
</p>    
<p><strong>Status:  
    <input name="statusField" disabled type="text" id="statusField" size="36" value="<%=request.getParameter("nomeField")%> foi cadastrado com sucesso">  
      </strong></p>  
</form>  
</body>  
</html>




É isso galera! Na parte 2 vamos fazer algumas consultas de dados e o final de nossa aplicação! 
Abraços!

Bruno Rafael.
.


Nenhum comentário:

Postar um comentário

Admin: Bruno

Olá Galera! muito grato por estarem acessando nosso blog. Espero que seja possível transmitir de forma compreensível um pouco de meus conhecimentos em programação, para esta comunidade de desenvolvedores que cresce cada vez mais! Espero que Gostem! Abraço! E meu enorme obrigado à Renato Simões, Átila Soares,Wanderson Quinto, Emerson e a toda galera que sempre ajudou meu sincero obrigado....
Especialmente a Natalia Failache e Rita de Cassia que sempre apoiaram este sonho....

De seu amigo Bruno Rafael.