Você está na página 1de 35
Utilizando Visual Web Pack para criar uma área administrativa Conteúdo Sobre o Tutorial de artigos

Utilizando Visual Web Pack para criar uma área administrativa

Conteúdo

Sobre o Tutorial de artigos

3

Antes

de começar

3

Primeira Parte – Criando o projeto e a área administrativa

4

Iniciando um projeto com Visual Web Pack

4

Criando o design de entrada da área administrativa

6

Adicionando as páginas da área administrativa

11

Segunda Parte – Criando a navegação

14

Criando a navegação das páginas

14

Terceira Parte – O Banco de dados e a tabela

16

Criando o banco de dados no MySQL

16

Adicionando um usuário ao banco de dados no MySQL

17

Criando a tabela no banco de dados

17

Quarta Parte – Criando a query e verificando o usuário

21

Criando a query para verificar o usuário e senha

21

Adicionando código ao botão Logar

24

Quinta Parte – Criando um Servlet Filter, configurando, rodando e criando a saída da área

administrativa

25

Criando o Filtro

25

A configuração

28

Rodando a aplicação

30

Criando o código para o logout do sistema

30

Exibindo uma mensagem de erro disparada pelo Filtro

31

Utilizando Visual Web Pack para criar uma área administrativa Referências 35 Em inglês e Português

Utilizando Visual Web Pack para criar uma área administrativa

Referências

35

Em inglês e Português

35

Para aprender a utilizar o Visual Web Pack

35

Utilizando Visual Web Pack para criar uma área administrativa Sobre o Tutorial de artigos Este

Utilizando Visual Web Pack para criar uma área administrativa

Sobre o Tutorial de artigos

Este Tutorial são os cinco artigos que serão publicados em outros sites.

Ao longo destes artigos, vocês irão aprender a utilizar o Visual Web Pack (VWP), atualmente um pacote separado do NetBeans na versão 5.5.1, para desenvolver uma área administrativa, passo a passo, com login e senha de acesso com banco de dados, criar a navegação por entre as páginas visualmente e na utilização de um recurso muito importante da API Servlet, chamada de Filtros.

Para a melhor compreensão do leitor, vamos utilizar a versão traduzida em nosso idioma (Português do Brasil), tanto do NetBeans como do VWP, apoiando a tradução do programa.

Antes de começar

Será fundamental que vocês tenham conhecimento de Java, uma vez que o NetBeans desenvolve com o Visual Web Pack aplicações nesta linguagem. Outro detalhe importante será no conhecimento de Java para o desenvolvimento de aplicações Web, principalmente no framework JavaServer Faces, que será fundamental para a melhor compreensão deste artigo.

Também será desejável um conhecimento do NetBeans IDE, uma vez que este artigo requer uma certa familiaridade com o programa. Alguns tutoriais e vídeos são disponibilizados no endereço oficial da IDE:

http://www.netbeans.org

Caso haja necessidade de baixar o programa, entre no endereço:

http://www.netbeans.info/downloads/index.php

Além do NetBeans, será necessária a instalação do Visual Web Pack, também traduzido em nosso idioma, que pode ser acessado no endereço:

http://www.netbeans.org/products/visualweb/

E baixado clicando-se no botão Download NetBeans Visual Web Pack.

Além dos itens citados, teremos que utilizar o MySQL como banco de dados, que além de ser excelente, é multiplataforma, podendo ter sua versão Community Server sendo baixada no endereço:

http://www.mysql.com/downloads

Além do banco de dados, também utilizaremos a ponte JDBC chamada Connector/J, necessária para a conexão entre a aplicação e o banco de dados.

Utilizando Visual Web Pack para criar uma área administrativa A versão que estamos usando neste

Utilizando Visual Web Pack para criar uma área administrativa

A versão que estamos usando neste artigo é a Connector/J 5.0 que pode ser baixada no endereço:

http://dev.mysql.com/downloads/connector/j/5.0.html

Caso precisem de mais detalhes, ao final dos artigos, sobre o NetBeans, no desenvolvimento de aplicações Web, há também o livro de minha autoria, Desenvolvendo Aplicações Web com NetBeans IDE 5.5, com apoio do DFJUG, que pode ser encontrado aqui na Linha de Código, no seguinte endereço:

http://www.linhadecodigo.com.br/livros.asp?id=919&sub=9

Primeira Parte – Criando o projeto e a área administrativa

Neste primeiro artigo vocês irão criar um projeto, utilizando o Visual Web Pack e desenharão a área administrativa .

Iniciando um projeto com Visual Web Pack

Com a instalação do NetBeans e do Visual Web Pack, podemos iniciar a criação de um projeto. Vá ao menu Arquivo e clique no item Novo Projeto (Ctrl+Shift+N).

Arquivo e clique no item Novo Projeto ( Ctrl+Shift+N) . Figura 1 Na caixa de diálogo

Figura 1

Na caixa de diálogo Novo Projeto, em Categorias selecione o item Web. Selecione em Aplicativo Visual Web em Projetos e clique no botão Próximo.

Utilizando Visual Web Pack para criar uma área administrativa Figura 2 Na segunda e última

Utilizando Visual Web Pack para criar uma área administrativa

Visual Web Pack para criar uma área administrativa Figura 2 Na segunda e última etapa do

Figura 2

Na segunda e última etapa do assistente, digite SistemaAdministrativo no campo Nome do Projeto. Altere também para o nome do pacote Java que vai utilizar no projeto no campo Pacote Java padrão.

O servidor neste caso poderá ser a sua escolha. No caso deste artigo, o container Servlet Tomcat 5.5.17, incluso na instalação da IDE fora utilizado. Para completar esta tarefa inicial, clique no botão Finalizar.

Utilizando Visual Web Pack para criar uma área administrativa Figura 3 Criando o design de

Utilizando Visual Web Pack para criar uma área administrativa

Visual Web Pack para criar uma área administrativa Figura 3 Criando o design de entrada da

Figura 3

Criando o design de entrada da área administrativa

Assim que concluir a criação do projeto, o NetBeans exibirá uma página inicial, chamada de Page1.jsp, ao qual poderemos arrastar os componentes em um editor WYSIWYG, chamado de Design.

Para iniciarmos, vamos criar uma grade que irá compor os componentes visuais para a entrada de login e senha. Na lateral direita de seu editor, arrastem da janela Paleta, no grupo Layout, o componente Painel de grade.

editor, arrastem da janela Paleta , no grupo Layout , o componente Painel de grade .

Figura 4

Utilizando Visual Web Pack para criar uma área administrativa Aumentem sua largura para o tamanho

Utilizando Visual Web Pack para criar uma área administrativa

Aumentem sua largura para o tamanho desejado. Este componente é responsável por gerar a tag JavaServer Faces <h:panelGrid >, ao qual possui por padrão apenas uma coluna.

> , ao qual possui por padrão apenas uma coluna. Figura 5 Voltando a janela Paleta

Figura 5

Voltando a janela Paleta arrastem do grupo Básico o componente Rótulo sobre o componente Painel de grade adicionado em seu Design.

o componente Painel de grade adicionado em seu Design. Figura 6 O VWP abrirá uma caixa

Figura 6

O VWP abrirá uma caixa de texto com a palavra rótulo selecionada. Alterem-na para “Usuário:” e pressionem ENTER para confirmar.

para “ Usuário: ” e pressionem ENTER para confirmar. Figura 7 Voltem para a janela Paleta

Figura 7

Voltem para a janela Paleta e arrastem desta vez, sobre o Painel de grade, o componente Campo de texto.

Utilizando Visual Web Pack para criar uma área administrativa Figura 8 Desta vez o campo

Utilizando Visual Web Pack para criar uma área administrativa

Visual Web Pack para criar uma área administrativa Figura 8 Desta vez o campo de texto

Figura 8

Desta vez o campo de texto ficará abaixo do rótulo adicionado.

vez o campo de texto ficará abaixo do rótulo adicionado. Figura 9 Com este campo selecionado,

Figura 9

Com este campo selecionado, vamos voltar à janela Propriedades e alterar a propriedade id, em Geral, para usuario e marcar a opção required, no grupo Dados.

usuario e marcar a opção required , no grupo Dados . Figura 10 Quase ao fim

Figura 10

Quase ao fim do grupo Básico, da janela Paleta, nós encontramos o componente Mensagem. Assim como os demais componentes usados, vamos arrastá-lo para o Painel de grade.

Utilizando Visual Web Pack para criar uma área administrativa Figura 11 Até o momento, possuiremos

Utilizando Visual Web Pack para criar uma área administrativa

Visual Web Pack para criar uma área administrativa Figura 11 Até o momento, possuiremos apenas os

Figura 11

Até o momento, possuiremos apenas os itens necessários para o login do usuário.

apenas os itens necessários para o login do usuário. Figura 12 Fazendo o mesmo processo, nós

Figura 12

Fazendo o mesmo processo, nós iremos adicionar mais três componentes: Rótulo, Campo de senha e Mensagem.

No Rótulo desta vez, digitaremos “Senha:”. Iremos alterar no Campo de senha a propriedade id para senha e marcar required.

Nossa página deverá se parecer com a Figura 13 mostrada a seguir:

deverá se parecer com a Figura 13 mostrada a seguir: Figura 13 Selecionem o Painel de

Figura 13

Selecionem o Painel de grade que adicionamos ao design da página e na janela Propriedades alterem a propriedade columns para 3.

Utilizando Visual Web Pack para criar uma área administrativa Figura 14 Observem que a grade

Utilizando Visual Web Pack para criar uma área administrativa

Visual Web Pack para criar uma área administrativa Figura 14 Observem que a grade agora alterou

Figura 14

Observem que a grade agora alterou alinhando o rótulo à caixa de texto e mensagem.

alterou alinhando o rótulo à caixa de texto e mensagem. Figura 15 Pressionando as teclas Ctrl+Shift

Figura 15

Pressionando as teclas Ctrl+Shift, iremos arrastar partindo do rótulo “Usuário:” para a caixa de texto usuario. Nosso cursor indicará a ligação (bind). O mesmo será feito com o rótulo “Senha:” e sua respectiva caixa de texto.

o rótulo “Senha:” e sua respectiva caixa de texto. Figura 16 Assim como os rótulos, iremos

Figura 16

Assim como os rótulos, iremos ligar cada caixa de texto a sua respectiva mensagem. Pressionando as mesmas teclas Ctrl+Shift, arrastem da caixa de texto usuario para o componente de mensagem ao seu lado. Façam o mesmo com o campo senha.

Para finalizar o design, precisaremos do botão de envio. Voltem à janela Paleta e arrastem o componente Botão. Digitem “Logar” e pressionem ENTER.

Utilizando Visual Web Pack para criar uma área administrativa Figura 17 Para finalizar, vamos adicionar

Utilizando Visual Web Pack para criar uma área administrativa

Visual Web Pack para criar uma área administrativa Figura 17 Para finalizar, vamos adicionar uma área

Figura 17

Para finalizar, vamos adicionar uma área de mensagens, para exibir informações ao usuário quando houver problema na hora de logar. Na janela Paleta arrastem para baixo do botão Logar o componente Grupo de mensagens.

Adicionando as páginas da área administrativa

A área administrativa ficará dentro de um diretório chamado “admin”. Na janela Projetos, vamos clicar com o direito do mouse sobre Páginas da Web e no menu de contexto, em Novo, no item Diretório.

Web e no menu de contexto, em Novo , no item Diretório . Figura 18 Na

Figura 18

Na caixa de diálogo Novo Diretório digitem admin no campo Nome da Pasta. Cliquem no botão Finalizar para concluir.

Utilizando Visual Web Pack para criar uma área administrativa Figura 19 Voltando a janela Projetos

Utilizando Visual Web Pack para criar uma área administrativa

Visual Web Pack para criar uma área administrativa Figura 19 Voltando a janela Projetos , sobre

Figura 19

Voltando a janela Projetos, sobre o diretório admin, clicaremos novamente com o direito do mouse. No menu de contexto, em Novo, desta vez vamos selecionar o item Página. Se quiserem, basta deixar o nome sugerido e confirmem no botão Finalizar.

Neste caso, basta colocar um Texto estático e digitar um texto. Para aumentarmos o tamanho da fonte e outros detalhes relacionados à formatação, temos que ir a janela Propriedades e

clicar no botão [

]

em style.

formatação, temos que ir a janela Propriedades e clicar no botão [ ] em style .

Figura 20

Utilizando Visual Web Pack para criar uma área administrativa Além do texto estático, vamos adicionar

Utilizando Visual Web Pack para criar uma área administrativa

Além do texto estático, vamos adicionar também um link que irá abrir uma segunda página. Na janela Painel, vamos arrastar o componente Hyperlink.

Na janela Painel , vamos arrastar o componente Hyperlink . Figura 21 Podemos digitar o texto

Figura 21

Podemos digitar o texto que melhor convier neste link. A formatação também é opcional.

convier neste link. A formatação também é opcional. Figura 22 Agora que temos a primeira página,

Figura 22

Agora que temos a primeira página, vamos criar uma segunda página. Neste caso, teremos dois links. Um para voltar à primeira página da área administrativa e o segundo para efetuar logout.

No link “Logout” alterem a propriedade id para logout. Isso ajudará a nos orientar na hora de criar a navegação por entre as páginas.

Utilizando Visual Web Pack para criar uma área administrativa Figura 23 Segunda Parte – Criando

Utilizando Visual Web Pack para criar uma área administrativa

Visual Web Pack para criar uma área administrativa Figura 23 Segunda Parte – Criando a navegação

Figura 23

Segunda Parte – Criando a navegação

No primeiro artigo vocês criaram um projeto e fizeram as páginas que irá compor o sistema administrativo. Neste artigo iremos criar a navegação das páginas, desde a sua entrada no sistema até a sua saída.

Caso não tenham visto a primeira parte do artigo, recomendo lê-la antes de prosseguir.

Criando a navegação das páginas

Após a criação das páginas administrativas, vamos criar a navegação das páginas, passando da área de “login” até o seu “logout”.

No Design de qualquer uma das páginas criadas, cliquem com o direito do mouse. Ao surgir o menu de contexto, clique no último item chamado de Navegação de página.

Inicialmente teremos apenas as páginas que criamos, sem ligação entre elas, como mostra a Figura 24 a seguir.

páginas que criamos, sem ligação entre elas, como mostra a Figura 24 a seguir. Figura 24

Figura 24

Utilizando Visual Web Pack para criar uma área administrativa Cliquem sobre a página Page1.jsp (a

Utilizando Visual Web Pack para criar uma área administrativa

Cliquem sobre a página Page1.jsp (a página de login). A página será ampliada, exibindo seus componentes. Arrastem do componente button1 para a página admin/Page1.jsp. Observem que uma linha surgiu, indicando que estas páginas contêm uma ligação. Quem conhece JavaServer Faces, sabe que estamos configurando as regras de navegação em um XML, que no caso do Visual Web Pack, está em um arquivo separado do faces-config.xml, chamado de navigation.xml (que pode ser visto expandindo WEB-INF em Páginas da Web na janela Projetos).

WEB-INF em Páginas da Web na janela Projetos ). Figura 25 Executando o mesmo processo, vamos

Figura 25

Executando o mesmo processo, vamos arrastar do componente hyperlink1, da página admin/Page1.jsp para a página admin/Page2.jsp.

página admin/Page1.jsp para a página admin/Page2.jsp . Figura 26 Da página admin/Page2.jsp , temos dois links.

Figura 26

Da página admin/Page2.jsp, temos dois links. O link que demos o nome de logout será usado para chamar a página Page1.jsp. O outro link, iremos chamar a página admin/Page1.jsp.

Cada elemento de navegação possui uma string, que é automaticamente adicionada. Perceba que temos case1, case2 e por ai vai, dependendo do número de casos que possuímos na construção de uma navegação. Evidentemente que isso pode confundir um desenvolvedor iniciante, além de ser muito desorganizado, tendo todos o mesmo nome. Por isso, entre as páginas Page1.jsp e admin/Page1.jsp cliquem na linha de navegação. Observem que na janela

Utilizando Visual Web Pack para criar uma área administrativa Propriedades temos uma propriedade chamada Resultado

Utilizando Visual Web Pack para criar uma área administrativa

Propriedades temos uma propriedade chamada Resultado, ao qual está escrito case1. Alterem para logado.

Na linha que liga as páginas admin/Page2.jsp à Page1.jsp, altere para logout.

admin/Page2.jsp à Page1.jsp , altere para logout . Figura 27 Terceira Parte – O Banco de

Figura 27

Terceira Parte – O Banco de dados e a tabela

No primeiro artigo vocês criaram um projeto e fizeram as páginas que irá compor o sistema. Na segunda parte ligaram as páginas, uma nas outras criando a navegabilidade. Agora, iremos criar o banco de dados que será utilizado pelo sistema, além da tabela de usuário para efetuar o login.

Criando o banco de dados no MySQL

Para criar o banco de dados no MySQL, vamos ter que entrar em sua área administrativa. Caso vocês estejam utilizando o sistema operacional Windows e executaram a instalação padrão, existe a chamada ao prompt de comando no menu Iniciar que o leva a área administrativa. Neste caso, iremos nos logar como root, o padrão e digitaremos apenas a senha administrativa pedida na instalação.

Caso

seqüência:

estejam

utilizando

o

mysql –u root –p

sistema operacional

Linux,

entrem

no

terminal e

digitem

a

Pressionem <ENTER> e digitem a senha, caso haja uma.

Assim que estivermos logado ao terminal do mysql, vamos criar o banco de dados, através do comando:

CREATE DATABASE administrator;

Utilizando Visual Web Pack para criar uma área administrativa Ao pressionar <ENTER> vocês criarão o

Utilizando Visual Web Pack para criar uma área administrativa

Ao pressionar <ENTER> vocês criarão o banco de dados chamado administrator. Caso já tenham este nome em algum banco de dados usado, outro poderá ser utilizado.

Adicionando um usuário ao banco de dados no MySQL

Além de criar o banco de dados, precisaremos criar um usuário. Ainda no terminal do MySQL, digitem a seqüência a seguir:

GRANT ALL ON administrator.* TO linhadecodigo IDENTIFIED BY '1234';

Este comando dará plenos poderes administrativos ao usuário chamado “linhadecodigo” com a senha “1234”.

Para que este usuário seja confirmado, teremos que usar a seguinte seqüência:

FLUSH PRIVILEGES;

Criando a tabela no banco de dados

Primeiramente precisaremos adicionar o driver do MySQL ao seu Netbeans. Na janela Execução, cliquem com o direito do mouse sobre Drivers, em Banco de Dados e selecionem Novo Driver.

Drivers , em Banco de Dados e selecionem Novo Driver . Figura 28 Na caixa de

Figura 28

Na caixa de diálogo Novo Driver JDBC, cliquem no botão Adicionar. Selecionem o arquivo .jar baixado do driver JDBC do MySQL e confirmem.

Utilizando Visual Web Pack para criar uma área administrativa Figura 29 Com o driver Connector/J

Utilizando Visual Web Pack para criar uma área administrativa

Visual Web Pack para criar uma área administrativa Figura 29 Com o driver Connector/J adicionado ao

Figura 29

Com o driver Connector/J adicionado ao NetBeans, podemos nos conectar ao banco de dados e criar a tabela necessária para efetuar o login e senha.

Ainda na janela Execução, clique com o direito do mouse sobre Banco de Dados. No menu de contexto selecionem Nova Conexão.

de Dados . No menu de contexto selecionem Nova Conexão . Figura 30 Na caixa de

Figura 30

Na caixa de diálogo Nova Conexão de Banco de Dados, selecionem no campo Nome o Connector/J.

Na URL do Banco de Dados completem como mostra a Figura a seguir:

Utilizando Visual Web Pack para criar uma área administrativa Figura 31 Digite em Nome de

Utilizando Visual Web Pack para criar uma área administrativa

Visual Web Pack para criar uma área administrativa Figura 31 Digite em Nome de Usuário e

Figura 31

Digite em Nome de Usuário e Senha o usuário e senha adicionados anteriormente na criação do banco de dados administrator.

Marquem a opção Lembrar senha durante esta sessão e confirmem. Observem que a caixa de diálogo mudará o foco para a guia Avançado, contendo um pequeno texto na parte inferior dizendo: Conexão estabelecida.

Neste momento, podemos criar nossa tabela administrativa.

Expandindo a conexão criada, na janela Execução, em Tabelas, clique com o direito do mouse e selecione Executar Comando.

, em Tabelas , clique com o direito do mouse e selecione Executar Comando . Figura

Figura 32

Utilizando Visual Web Pack para criar uma área administrativa Na janela Comando SQL 1 ,

Utilizando Visual Web Pack para criar uma área administrativa

Na janela Comando SQL 1, digite o comando SQL mostrado na Figura a seguir e depois clique no botão Executar SQL.

Figura a seguir e depois clique no botão Executar SQL . Figura 33 Observem na barra

Figura 33

Observem na barra de status do NetBeans que o texto Expressões SQL executadas com sucesso surgirá, indicando que a tabela foi criada.

Caso a tabela não apareça na janela Execução, em Tabelas cliquem com o direito do mouse e selecionem no menu de contexto o item Atualizar.

mouse e selecionem no menu de contexto o item Atualizar . Figura 34 Fazendo da mesma

Figura 34

Fazendo da mesma forma que usamos para criar a tabela, vamos adicionar um usuário e uma senha. Em Executar Comando digite a SQL mostrada a seguir:

INSERT INTO usuarios (login, password) VALUES(‘linhadecodigo’,’123’);

Utilizando Visual Web Pack para criar uma área administrativa Figura 35 Caso desejem ver os

Utilizando Visual Web Pack para criar uma área administrativa

Visual Web Pack para criar uma área administrativa Figura 35 Caso desejem ver os dados inseridos

Figura 35

Caso desejem ver os dados inseridos na tabela, cliquem novamente com o direito do mouse sobre a tabela usuários, na janela Execução e selecionem Visualizar Dados.

Uma

encontrados.

query

SELECT

será executada,

exibindo

na parte

inferior

da janela os

resultados

exibindo na parte inferior da janela os resultados Figura 36 Agora que temos o usuário, estamos

Figura 36

Agora que temos o usuário, estamos prontos para codificar a aplicação.

Quarta Parte – Criando a query e verificando o usuário

Nesta etapa, criaremos a query que será utilizada para verificar se o login utilizado pertence a um usuário da área administrativa da aplicação, passando pela verificação da senha, liberando a entrada no sistema. Em seguida adicionaremos código ao botão Logar para que o usuário possa entrar na área administrativa.

Criando a query para verificar o usuário e senha

Para compreender o que iremos passos:

desenvolver, observem a Figura a seguir e siga

os três

1 - Com a página Page1.jsp aberta, arraste da janela Execução a tabela usuarios para o Design.

Utilizando Visual Web Pack para criar uma área administrativa 2 usuariosDataProvider . – Observem que

Utilizando Visual Web Pack para criar uma área administrativa

2

usuariosDataProvider.

Observem

que

na

janela

Esboço

surgirá

um

componente

chamado

de

3 – Dentro de SessionBean1 aparecerá um componente chamado de usuariosRowSet, contendo uma query da tabela usuarios.

de usuariosRowSet , contendo uma query da tabela usuarios. Figura 37 Agora que a classe SessionBean1

Figura 37

Agora que a classe SessionBean1 possui acesso ao banco de dados e a tabela usuarios, iremos alterá-la para que um usuário possa ser selecionado. Em usuariosRowSet, na janela Esboço, vamos dar um duplo clique.

Ao surgir a janela Query Editor, no segundo quadro, na estrutura da tabela usuarios, clique com o direito do mouse sobre a linha da coluna login e selecione no menu de contexto o item Adicionar critérios de consulta.

menu de contexto o item Adicionar critérios de consulta . Figura 38 Na caixa de diálogo

Figura 38

Na caixa de diálogo Adicionar critérios de consulta, mantenha em Comparação o item “=Iguais” e marque Parâmetro, mantendo da forma como está. Confirme.

Utilizando Visual Web Pack para criar uma área administrativa Figura 39 Observe que um critério

Utilizando Visual Web Pack para criar uma área administrativa

Visual Web Pack para criar uma área administrativa Figura 39 Observe que um critério será adicionado,

Figura 39

Observe que um critério será adicionado, onde o parâmetro de entrada é representado pelo sinal de interrogação “?”. Deixaremos as explicações técnicas quanto ao que está ocorrendo para outra oportunidade. O importante é que agora temos a query como precisamos para verificar o login e a senha.

a query como precisamos para verificar o login e a senha. Figura 40 IMPORTANTE: Quando estivermos

Figura 40

IMPORTANTE: Quando estivermos utilizando o Visual Web Pack com o Apache Tomcat embutido, adicione o driver JDBC do seu banco de dados, no caso do MySQL no seguinte local da instalação do NetBeans:

$LOCAL_INSTALADO/netbeans-5.5/enterprise3/apache-tomcat-5.5.17/common/lib

Utilizando Visual Web Pack para criar uma área administrativa Adicionando código ao botão Logar Primeiramente

Utilizando Visual Web Pack para criar uma área administrativa

Adicionando código ao botão Logar

Primeiramente vamos adicionar o código necessário para logar o sistema. Na Page1.jsp, na área de login, comecem com um duplo clique no botão Logar.

Observem que o Visual Web Pack já adiciona um método público de retorno String, contendo inclusive a string “logado” colocada na navegação.

Vamos adicionar o código mostrado a seguir para que ao clicar no botão, o usuário e a senha sejam verificados pelo banco de dados, retornando ou não o acesso a área administrativa.

public String button1_action() {

try { //captura o login passado pelo campo usuario

getSessionBean1().getUsuariosRowSet().

setObject(1,usuario.getText());

//reinicia o Data Provider //apagando dados cacheados anteriores usuariosDataProvider.refresh();

//verifica se a senha está correta, evitando SQL Injection if(senha.getText().equals((String) usuariosDataProvider.getValue("usuarios.password"))){

//captura a sessão do contexto criado //pelo JavaServer Faces do VWP FacesContext fc = FacesContext.getCurrentInstance(); HttpSession session = (HttpSession)fc.getExternalContext().getSession(false);

//cria uma sessão contendo o nome de usuario chamada logado session.setAttribute("logado", usuario.getText() ); //redireciona para a área administrativa return "logado";

}

} catch (Exception ex) { //exibe a mensagem de login ou senha inválidos error("Login ou senha inválidos");

}

return "";

}

Este código funciona perfeitamente, e em um teste você pode “logar” no sistema. O problema maior está nas áreas administrativas, que exigem uma segurança maior. Quando você está

Utilizando Visual Web Pack para criar uma área administrativa dentro da área administrativa, o navegador

Utilizando Visual Web Pack para criar uma área administrativa

dentro da área administrativa, o navegador vai armazenando os endereços das páginas na barra de endereços. Qualquer pessoa depois, poderá acessar estas áreas sem a necessidade de logar, simplesmente acessando a área através do seu endereço direto.

Quinta Parte – Criando um Servlet Filter, configurando, rodando e criando a saída da área administrativa

Na quinta etapa, vamos criar um Filtro com a API Servlet, que gerenciará se o usuário está ou não logado, configuraremos suas características, rodaremos a aplicação e por último adicionaremos a “ação” de “logout” na página.

Criando o Filtro

Na etapa anterior, vimos que já podemos entrar na área administrativa, uma vez que o botão Logar agora possui o código necessário para verificar o usuário e a senha. Mas infelizmente, também estamos sabendo que não há segurança alguma nas áreas administrativas, o que acarretará em uma possível invasão.

Para evitar isso, devemos criar uma sessão gerenciada. A especificação da API Servlet possui uma forma de gerenciar esta situação através da API Servlet Filter. É a melhor maneira de redirecionar um usuário quando a sessão está expirada. Claro que isso também evita a entrada direta pelo endereço no navegador.

No código utilizado pelo botão Logar, na etapa anterior, nos criamos uma sessão chamada de “logado”, que possui o login do usuário como valor.

//cria uma sessão contendo o nome de usuario chamada logado session.setAttribute("logado", usuario.getText() );

É através deste atributo de sessão que vamos nos basear para verificar se há ou não um usuário logado no sistema administrativo.

Para criar um filtro, cliquem com o botão direito do mouse sobre o projeto. Selecionem no menu de contexto o item Novo e cliquem em Arquivo/Pasta.

Na caixa de diálogo Novo Arquivo, selecione em Categorias o item Visual Web e Filtro em Tipos de Arquivo. Cliquem no botão Próximo.

Utilizando Visual Web Pack para criar uma área administrativa Figura 41 Na segunda etapa da

Utilizando Visual Web Pack para criar uma área administrativa

Visual Web Pack para criar uma área administrativa Figura 41 Na segunda etapa da criação do

Figura 41

Na segunda etapa da criação do Filtro, digite FiltroAdministrativo no campo Nome da Classe. Selecione no campo Pacote o pacote meupacote.admin. Clique no botão Próximo.

o pacote meupacote.admin . Clique no botão Próximo . Figura 42 Na terceira etapa do assistente,

Figura 42

Na terceira etapa do assistente, selecione em Nome do Filtro, o item FiltroAdministrativo e clique no botão Editar.

Utilizando Visual Web Pack para criar uma área administrativa Figura 43 Na caixa de diálogo

Utilizando Visual Web Pack para criar uma área administrativa

Visual Web Pack para criar uma área administrativa Figura 43 Na caixa de diálogo Mapeamento do

Figura 43

Na caixa de diálogo Mapeamento do Filtro, em URL, adicione /faces/admin/*. Perceba que estamos adicionando um filtro de segurança em um diretório chamado admin com tudo que há dentro. Confirme no botão OK. E em seguida, confirme na caixa de diálogo Novo Arquivo no botão Finalizar.

na caixa de diálogo Novo Arquivo no botão Finalizar . Figura 44 O NetBeans criará uma

Figura 44

O NetBeans criará uma classe, mapeada inclusive por seu deployment descriptor (web.xml), chamada de FiltroAdministrativo. Altere no trecho a seguir o código:

Utilizando Visual Web Pack para criar uma área administrativa public void doFilter (ServletRequest request,

Utilizando Visual Web Pack para criar uma área administrativa

public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {

HttpSession session = ((HttpServletRequest)request).getSession();

String logado = (String)session.getAttribute("logado");

//verifica se logado não existe if(logado==null){

//envia uma mensagem caso o usuário //tente entrar em alguma área administrativa //sem estar logar session.setAttribute("msg","Efetue o login no sistema");

//redireciona para a página de login ((HttpServletResponse)response).sendRedirect(" /Page1.jsp");

}else{

chain.doFilter(request, response);

}

}

O Filtro Servlet faz todos seus processos no método de doFilter, por esta razão fora nele que nós adicionamos o código para que seja verificada a sessão chamada de ”logado”.

Caso a sessão não exista, ela retorna um valor null. Ocorrendo isso, o método sendRedirect é chamado e a página de login e senha (Page1.jsp) é mostrada.

A configuração

Após criar o Filtro Servlet, será necessário configurarmos o tempo que a sessão permanecerá e em que local será criada.

Na janela Projetos, expanda o item Arquivos de Configuração e dê um duplo clique em web.xml.

Em Geral, no deployment descriptor, aberto no NetBeans, altere o Tempo-limite da Sessão adicionando o número 30, que equivale a 30 minutos e tempo da sessão.

Expanda

Parâmetros

do

Contexto

e

selecione

o

primeiro

parâmetro,

chamado

de

javax.faces.STATE_SAVING_METHOD. Clique no botão Editar, logo abaixo.

Utilizando Visual Web Pack para criar uma área administrativa Figura 45 Na caixa de diálogo

Utilizando Visual Web Pack para criar uma área administrativa

Visual Web Pack para criar uma área administrativa Figura 45 Na caixa de diálogo Editar Parâmetro

Figura 45

Na caixa de diálogo Editar Parâmetro do Contexto, altere para client no campo Valor do Parâmetro e confirme no botão OK.

no campo Valor do Parâmetro e confirme no botão OK . Figura 46 Quando o estado

Figura 46

Quando o estado da sessão é salvo no lado cliente, o JavaServer Faces cria um campo oculto na página, transmitindo assim a sessão de um lado para o outro.

Salvem todas as alterações.

Utilizando Visual Web Pack para criar uma área administrativa Rodando a aplicação Execute a aplicação

Utilizando Visual Web Pack para criar uma área administrativa

Rodando a aplicação

Execute a aplicação através do botão

a aplicação Execute a aplicação através do botão Executar o Projeto Principal ou pelo atalho F6

Executar o Projeto Principal ou pelo atalho F6.

Observe que se tentarmos entrar com um login e senha inválidos, haverá uma mensagem de erro. O mesmo ocorre caso não seja preenchido nada em um dos dois campos ou nos dois ao mesmo tempo.

nada em um dos dois campos ou nos dois ao mesmo tempo. Figura 47 Quando logar,

Figura 47

Quando logar, você tem livre acesso a área administrativa. Inclusive pela barra de endereços.

Criando o código para o logout do sistema

O que resta agora é criar o código para remover a sessão quando clicarmos no link “Logout”. Dêem um duplo clique no link criado na admin/Page2.jsp.

Utilizando Visual Web Pack para criar uma área administrativa Figura 48 Adicionem o código mostrado

Utilizando Visual Web Pack para criar uma área administrativa

Visual Web Pack para criar uma área administrativa Figura 48 Adicionem o código mostrado a seguir:

Figura 48

Adicionem o código mostrado a seguir:

public String logout_action() {

FacesContext fc = FacesContext.getCurrentInstance(); HttpSession session = (HttpSession)fc.getExternalContext().getSession(false);

//expira a sessão session.invalidate();

return "logout";

}

Com o método invalidade, sua sessão acaba e faz com que o usuário tenha que se logar novamente.

Exibindo uma mensagem de erro disparada pelo Filtro

Quando o usuário estiver tentando entrar em uma área administrativa, diretamente pela barra de endereços, não só podemos redirecioná-lo, como está ocorrendo atualmente, mas também capturar a mensagem de erro lançada pelo Filtro e exibi-la.

if(logado==null){

//envia uma mensagem caso o usuário //tente entrar em alguma área administrativa //sem estar logar session.setAttribute("msg","Efetue o login no sistema");

Voltando a Page1.jsp, na entrada de login e senha, clique no terceiro botão, Java, na parte superior.

No método prerender e adicionem o código mostrado a seguir:

public void prerender() {

Utilizando Visual Web Pack para criar uma área administrativa //exibe a mensagem caso o usuário

Utilizando Visual Web Pack para criar uma área administrativa

//exibe a mensagem caso o usuário tente entrar na área //administrativa sem se logar FacesContext fc = FacesContext.getCurrentInstance(); HttpSession session = (HttpSession) fc.getExternalContext().getSession(false); String msg = (String)session.getAttribute("msg"); if(msg!=null) error(msg);

}

Salve e rode novamente a aplicação. Se tentarmos entrar em uma área protegida do sistema, uma mensagem surgirá, avisando do problema.

em uma área protegida do sistema, uma mensagem surgirá, avisando do problema. Figura 49 www.integrator.com.br 32

Figura 49

Utilizando Visual Web Pack para criar uma área administrativa E para que, esta mensagem não

Utilizando Visual Web Pack para criar uma área administrativa

E para que, esta mensagem não fique persistente:

E para que, esta mensagem não fique persistente: Figura 50 Volte ao código do botão Logar

Figura 50

Volte ao código do botão Logar e adicione o trecho mostrado a seguir:

//caso a sessão msg esteja com valor, a remove if(session.getAttribute("msg")!=null) session.removeAttribute("msg");

Com mais detalhes onde será posicionado:

if(senha.getText().equals((String)

usuariosDataProvider.getValue("usuarios.password"))){

//captura a sessão do contexto criado //pelo JavaServer Faces do VWP FacesContext fc = FacesContext.getCurrentInstance(); HttpSession session = (HttpSession)fc.getExternalContext().getSession(false);

//cria uma sessão contendo o nome de usuario chamada logado session.setAttribute("logado", usuario.getText() );

//caso a sessão msg esteja com valor, a remove if(session.getAttribute("msg")!=null) session.removeAttribute("msg");

Utilizando Visual Web Pack para criar uma área administrativa //redireciona para a área administrativa return

Utilizando Visual Web Pack para criar uma área administrativa

//redireciona para a área administrativa return "logado";

}

Utilizando Visual Web Pack para criar uma área administrativa Referências Em inglês e Português

Utilizando Visual Web Pack para criar uma área administrativa

Referências

Em inglês e Português

http://www.netbeans.org/kb/55/vwp-index_pt_BR.html?1

Para aprender a utilizar o Visual Web Pack

Desenvolvendo aplicações Web com NetBeans IDE 5.5 – Edson Gonçalves – Editora Ciência Moderna - 2007