Faculdades Integradas Santa Cruz

Tutorial de Java MVC WEB

Criando uma tela de Login com Banco de Dados

2009

Introduo
O objetivo deste tutorial apresentar os conceitos de estruturao de um projeto Web MVC utilizando para isso uma aplicao exemplo baseada em uma simples tela de login.

Descrio do Sistema
O sistema consiste em uma tela simples (Web) onde o usurio deve informar seu login e sua senha para ter acesso. Caso o usurio informe um login ou uma senha incorreta, uma mensagem deve ser apresentada para ele, possibilitando que ele faa uma nova tentativa. Caso o usurio informe um login e senha vlidos, o sistema deve redireciona-lo para uma tela de boas vindas, onde ser apresentada uma mensagem do tipo: ... Ol <Fulano>! Seja bem vindo ao nosso sistema!

Modelagem do Sistema
Abaixo, seguem alguns diagramas que representam as funcionalidades do sistema proposto.

Modelo de Caso de Uso

Diagrama de Seqncia
Este diagrama no segue todas as formalidades necessrias previstas na UML. O objetivo dele de apresentar de maneira sucinta os dois cenrios possveis da aplicao proposta.

Cenrio de Login OK

Cenrio de Login No OK

Diagrama de Classes
importante lembrar que neste diagrama de classes, no foi representada a diviso de pacotes e tambm no foi demonstrada as views representadas por jsps.

Criando a Aplicao
Para iniciarmos a criao da aplicao faz-se necessrio compreender alguns conceitos de desenvolvimento Web com Java.

Plataforma e Requisitos Tcnicos

Para o desenvolvimento desta aplicao utilizaremos a IDE Eclipse : www.eclipse.org Tambm utilizaremos a JDK 1.5 ou 1.6 : www.sun.com Para armazenamento de dados utilizaremos o Mysql : www.mysql.com

Criando a Estrutura Bsica do Projeto

Abaixo descreveremos o passo a passo para criarmos a estrutura bsica do projeto Web no Eclipse. 1. Abra o Eclipse

2. No menu File, v em New -> Dynamic Web Project

3. Na tela seguinte, digite o nome do projeto : LoginMvc

4. Caso o campo Target Runtime esteja em branco siga os procedimentos abaixo 5. Clique no boto New, ao lado do campo

6.

Direcione para o diretrio Raiz do TomCat

7. Click em Finish para concluir a criao do projeto base

Criando a Separao em Camadas (MVC)

Como j sabido de todos, uma aplicao bem estruturada deve ser construda utilizando a separao em camadas. Esta separao serve como organizao e principalmente como reutilizao de cdigo. No Java, a diviso em camadas comea com a criao dos chamados Pacakges. Pacakges ou Pacotes nada mais so que pastas, criadas para dividir a aplicao fisicamente. Em uma aplicao MVC tradicional, basicamente possumos as seguintes camadas: Visualizao: Camada responsvel por toda a comunicao com o usurio. Em nossa aplicao Web, esta camada representada por nossas pginas .jsps. Controle: Camada responsvel por conter toda a lgica de nosso sistema. nesta camada onde so feitas as validaes e implementadas as lgicas de negcio. Normalmente em aplicaes Java, esta camada dividida em duas: o Servlets: Camada intermediria, responsvel por obter os dados enviados pela camada de visualizao e repassar para a camada de controle propriamente dita. o Controle: Esta a camada de controle efetivamente. Modelo: Camada responsvel por todas as tarefas de busca e armazenamento de dados em nossa aplicao. Em Java, esta camada tambm sofre novas divises: o Dao: Camada responsvel pela conexo com o banco de dados e todas as operaes de persistncia. o Vo : Camada responsvel por conter Classes que representem o modelo de dados. Atravs delas que o fluxo de informaes trafegar entre as camadas da aplicao.

Criando pacotes em nossa aplicao

8. Na janela a esquerda, clique no + da rvore de sua aplicao para expandir, ento click com o boto direito na pasta src, v na opo New -> Package.

9. Digite o nome do pacote, usando a notao de DNS reverso. No nosso caso ser br.santacruz.loginmvc.control. Repita os passos 8 e 9 para os pacotes de servlets, do, vo como so apresentados nas figuras abaixo.

10. Aps a criao dos pacotes, a estrutura de nossa aplicao dever estar parecida com a figura apresentada abaixo.

Importando bibliotecas necessrias

Para que nossa aplicao possa funcionar corretamente, precisamos adicionar duas bibliotecas externas. So elas: MysqlJdbcDriver: Classe responsvel pela comunicao da aplicao com o banco de dados. Deixei-a disponvel em minha pgina pessoal: http://juliomartins.pbworks.com/f/mysql-connector-java-5.1.7-bin.jar JSTL: Conjunto de classes que representam uma taglib que possibilita a comunicao entre Servlets e JSP de maneira transparente. http://juliomartins.pbworks.com/f/jstl.jar http://juliomartins.pbworks.com/f/standard.jar

Procedimentos para a importao das bibliotecas

11. Click no link e salve os arquivos na pasta Lib do seu projeto. No meu caso o caminho ficou assim: C:\Projetos\SC\eclipse\LoginMvc\WebContent\WEBINF\lib OBS: Preste ateno ao final do caminho. Os arquivos devem ser colocados dentro da pasta WebContent\Web-Inf\lib do seu projeto.

12. Aps copiar os arquivos na pasta lib, volte para o Eclipse, clique com o boto direito sobre o nome do seu projeto e v na opo Properties

13. Click na opo Java Build Path e em seguida na aba Libraries

14. Click no boto Add External Jar e escolha os trs arquivos localizados na pasta lib.

15. Click em Ok para finalizar o processo de importao.

Criando o banco de dados

Nossa aplicao de login ter apenas uma tabela chamada Logins. Esta tabela conter a seguinte estrutura: Login : varchar(200) not null (PK) Senha: varchar(100) not null Esta tabela ser criada em um banco chamado LoginBd. Abaixo segue o script para criao do banco e da tabela.
CREATE DATABASE IF NOT EXISTS loginbd; USE loginbd; --- Definition of table `logins` -DROP TABLE IF EXISTS `logins`; CREATE TABLE `logins` ( `login` varchar(200) NOT NULL, `senha` varchar(100) NOT NULL, PRIMARY KEY (`login`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1; --- Dumping data for table `logins` -/*!40000 ALTER TABLE `logins` DISABLE KEYS */; INSERT INTO `logins` (`login`,`senha`) VALUES ('camila@gmail.com','567'), ('elaine@gmail.com','890'), ('martins.julio@gmail.com','1234'); /*!40000 ALTER TABLE `logins` ENABLE KEYS */;

Criando o VO
Como j dito anteriormente, o VO normalmente criado para representar o modelo de dados e facilitar o trafego de informaes na aplicao. No nosso caso, criaremos um nico VO chamado LoginVo. 16. Click com o boto direito sobre o pacote br.santacruz.loginmvc.model.vo. Escolha a opo New -> Class

17. Na tela seguinte digite o nome da classe: LoginVo

18. No corpo da classe criada, voc deve inserir os mesmos atributos existentes em nossa tabela do banco de dados, conforme segue o cdigo abaixo.
package br.santacruz.loginmvc.model.vo; public class LoginVo { private String login; private String senha; }

19. Aps ter inserido os atributos, click com o boto direito sobre o cdigo e selecione a opo Source -> Generate Getters and Setters

20. Marque os dois atributos e click em OK

21. Nosso VO acaba de ser criado e deve estar parecido com a tela a seguir;

Criando o DAO
Nossa aplicao ter basicamente duas classes para representar o DAO: GenericDao: Classe responsvel por conter todos os mtodos genricos de banco tais como getConnection, CloseConnection, alm de conter os atributos de ResultSet, Statement e a prpria Connection. Alm destes atributos, na GenericDao que encontram-se as informaes de usurio, senha, base e host. Esta classe servir de base para qualquer outra Dao que venha a ser criada. LoginDao: Classe criada especificamente para tratar das aes a serem realizadas no banco,necessrias para o funcionamento correto de nossa aplicao. esta classe que ir conter o mtodo de VerificaLogin que ir buscar no banco informaes relevantes a um login especifico.

Criando o GenericDao
Basicamente o GenericDao contm os elementos bsicos para que a conexo com o banco seja estabelecida. 22. Click com o boto direito sobre o pacote br.santacruz.model.dao e selecione a opo New-> Class. Na tela seguinte digite o nome da Classe : GenericDao e confirme

23. Aps, insira o cdigo abaixo na classe recm criada.

package br.santacruz.loginmvc.model.dao; /* * Classe genrica para gerenciar as conexes com o banco de dados mysql */

import import import import import

java.sql.Connection; java.sql.DriverManager; java.sql.ResultSet; java.sql.SQLException; java.sql.Statement;

/** * * @author Administrator */ public class GenericDao { protected Statement stmt = null; protected ResultSet rs = null; protected Connection connection = null; private String base = "loginbd"; private String host = "//localhost:3306"; private String driver = "com.mysql.jdbc.Driver"; private String user = "root"; private String senha = "root"; public Connection getConnection(){ try{ if( connection == null ){ createConnection(); } else if( connection.isClosed() ){ createConnection(); } } catch(SQLException sEx){ sEx.printStackTrace(); } return connection; }

private void createConnection(){ try { Class.forName(driver).newInstance(); connection = DriverManager.getConnection("jdbc:mysql:" + host + "/" + base, user, senha); } catch (Exception ex) { ex.printStackTrace(); } } protected void closeConection() { try{ if( this.rs != null ){ this.rs.close(); } if( this.stmt != null ){ this.stmt.close(); } if( this.connection != null ){ this.closeConection(); } }catch (SQLException sEx) { sEx.printStackTrace(); } } }

Criando a Classe de Login Dao

A nossa classe LoginDao possui somente um mtodo que o verificaLogin. Este mtodo recebe um LoginVo preenchido com login e senha e verifica no banco se existe tais dados.Caso exista aquele login e senha no banco, o mtodo retorna 1. Caso contrrio, retorna 0 (zero). 24. Click com o boto direito sobre o pacote br.santacruz.loginmvc.model.dao e escolha a opo New -> Class

25. Na prxima tela, digite o nome da classe: LoginDao

26. Click no boto Finish 27. Produza o cdigo que faa o select no banco e retorne. Lembre de que o LoginDao uma especializao de GenericDao, observe a colocao do extends aps a declarao da classe.

package br.santacruz.loginmvc.model.dao; import br.santacruz.loginmvc.model.vo.LoginVo; public class LoginDao extends GenericDao{ public int verificaLogin(LoginVo lv) { try { this.stmt = this.getConnection().createStatement(); this.rs = this.stmt.executeQuery("select login,senha from logins where login ='"+lv.getLogin()+"' and senha = '"+lv.getSenha()+"'"); if (rs.next()) { return 1; //Achou o login! } else return 0; //No achou o login! Login invalido! } catch (Exception e) { e.printStackTrace(); return 0; } } }

Criando o LoginControl
Nossa aplicao tem apenas uma classe de controle. Nesta classe de controle, o nico mtodo que temos o mtodo de validarLogin. Este mtodo ir receber o Login e a Senha digitada e ir verificar com Dao a existncia ou no. 28. Click com o boto direito sobre o pacote br.santacruz.loginmvc.control e selecione a opo New -> Class

29. Aps criada a classe, devemos fazer um cdigo simples como demonstrado abaixo.
package br.santacruz.loginmvc.control; import br.santacruz.loginmvc.model.dao.LoginDao; import br.santacruz.loginmvc.model.vo.LoginVo; public class LoginControl { public int ValidarLogin(String login, String senha) { LoginVo lv = new LoginVo(); lv.setLogin(login); lv.setSenha(senha); //Instanciando o DAO LoginDao ld = new LoginDao(); int retorno = ld.verificaLogin(lv); return retorno; } }

Criando o Servlet
O servlet a classe responsvel por pegar os atributos informados pelo usurio e repassar para o controle. 30. Click com o boto direito no pacote br.santacruz.loginmvc.control.servlets, escolha a opo New -> Other. V na pasta Web e selecione a opo Servlet

31. Digite o nome do servlet e confirme.

32. Na classe do servlet, crie um mtodo denominado processRequest e implemente o cdigo abaixo.

package br.santacruz.loginmvc.control.servlets; import java.io.IOException; import import import import import javax.servlet.RequestDispatcher; javax.servlet.ServletException; javax.servlet.http.HttpServlet; javax.servlet.http.HttpServletRequest; javax.servlet.http.HttpServletResponse;

import br.santacruz.loginmvc.control.LoginControl; public class LoginServlet extends HttpServlet { private static final long serialVersionUID = 1L; public LoginServlet() { super(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { RequestDispatcher view; String login = request.getParameter("txtLogin"); String senha = request.getParameter("txtSenha"); LoginControl lc = new LoginControl(); int retorno = lc.ValidarLogin(login, senha); if (retorno == 1) { request.setAttribute("msg", "Seja bem vindo "+login); view = request.getRequestDispatcher("BemVindo.jsp"); }else { request.setAttribute("msg", "Login desconhecido!"); view = request.getRequestDispatcher("Login.jsp"); } view.forward(request, response); } }

Criando as pginas JSP

Precisamos criar duas pginas bsicas para concluir o nosso sistema. Uma delas a pgina de Login, onde o usurio ir inserir os dados para logar. A outra a pgina de BemVindo.jsp onde o usurio ser cumprimentado pelo seu logon bem sucedido. 33. Click na pasta WebContent do seu projeto, com o boto direito e selecione a opo New -> Other e selecione a opo JSP

34. Na prxima tela, digite o nome da JSP: Login (sem a extenso) e click e finish.

35. Aps, construa o cdigo HTML que contenha um formulrio com dois inputs e um boto. Semelhante ao cdigo abaixo:

<%@ page contentType="text/html; charset=ISO-8859-1"%> <%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Login MVC/title> </head> <body> <form name="formLogin" action="LoginServlet" method="post"> Login: <br/> <input type="text" name="txtLogin"/> <br/> Senha: <br/> <input type="password" name="txtSenha"/> <br/> <input type="submit" value="Logar!"/> </form> <c:out value="${msg}"/> </body> </html>

36. Aps, precisamos criar a pgina BemVindo.jsp. Para tal, repita os ltimos passos anteriores somente trocando o nome da JSP a ser criada.

37. Produza um cdigo semelhante ao abaixo:

<%@ page contentType="text/html; charset=ISO-8859-1"%> <%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Seja Bem Vindo!</title> </head> <body> <c:out value="${msg}"/> </body> </html>

Finalizando
Se voc acompanhou at aqui, agora falta pouco! Basta clicar com o boto direito em cima do nome do projeto e escolher a opo Run as -> Run on Server PRONTO! Abaixo, segue a seqncia de telas produzidas com os testes!