Módulo 2: Incluir Recursos Avançados

Neste módulo, você aprenderá como utilizar recursos avançados para modificar o formato das páginas da Web, incluir um recurso que permita que os usuários façam upload de arquivos para o banco de dados, como configurar regras que enviem automaticamente os usuários para uma página específica e como automatizar algumas tarefas administrativas, como a geração de chaves.

Objetivos do Aprendizado

Este módulo ensina maneiras mais poderosas de utilizar dados de um banco de dados. Neste módulo, você irá:

Formatar registros de banco de dados em uma página da Web
Incluir um componente que permite o upload de arquivos para um banco de dados a partir de uma página da Web
Navegar de página para página automaticamente
Automatizar algumas tarefas de administração do banco de dados

Tempo Necessário

Este módulo levará aproximadamente 1 hora e 30 minutos para ser concluído. Se você decidir explorar outras facetas de Web sites dinâmicos enquanto trabalha no tutorial, ele poderá levar mais tempo para ser concluído.

Pré-requisitos

Se você já concluiu o Módulo 1: Criando Páginas da Web com Conexões de Dados, ignore o restante desta seção de pré-requisitos e comece a trabalhar no Lição 2.1: Formatar uma Tabela de Dados.

Se você estiver começando o trabalho neste tutorial com o módulo 2, sem fazer o módulo 1 primeiro, deverá importar os recursos necessários, configurar o servidor de destino e configurar a conexão com o banco de dados.

Para importar os recursos necessários:

Importar o Projeto. Vá para a perspectiva da Web (Janela (Window) > Abrir Perspectiva (Open Perspective) > Web).
Na visualização Explorador Corporativo (Enterprise Explorer) da perspectiva da Web, certifique-se de que o projeto ClassifiedsTutorial seja parecido com a imagem a seguir:

Para configurar o servidor de destino:

Na visualização Explorador Corporativo (Enterprise Explorer) da perspectiva da Web, clique com o botão direito do mouse em ClassifiedsTutorial e selecione Propriedades (Properties)
Na lista de propriedades, clique em Servidor (Server).
Na lista de servidores Padrão, selecione o servidor que você deseja utilizar como padrão. Clique em Aplicar (Apply).
Na lista de propriedades, clique em Tempos de Execução de Destino (Targeted Runtimes).
Na lista de Tempos de Execução (Runtimes), clique no tempo de execução que corresponde ao servidor selecionado. Clique em OK.

Nota: Se não forem exibidos servidores na lista de servidores Padrão, e houver tempos de execução do servidor instalados, talvez seja necessário configurar o servidor. Para configurar um servidor, faça o seguinte:

Clique com o botão direito do mouse no arquivo all_records.jsp e clique em Executar como (Run As) > Executar no Servidor (Run on Server).
Escolha Definir manualmente um novo servidor (Manually define a new server).
Selecione um servidor instalado.
Siga as instruções do assistente para configurar o servidor. Na primeira vez que você fizer a execução no servidor, poderá receber um erro. Para corrigir o erro, configure o servidor de destino como descrito acima, reinicie o servidor na visualização Servidores e recarregue a página da Web no navegador.

Se você voltar para as etapas descritas anteriormente para configurar um servidor de destino, agora verá que o servidor padrão é o único que você configurou. Se um servidor estiver instalado, mas não configurado, ele não será mostrado na lista de servidores na qual é possível escolher um destino padrão.

Para configurar a conexão com o banco de dados:

Na visualização Explorador Corporativo (Enterprise Explorer), clique com o botão direito em ClassifiedsTutorial e selecione Propriedades (Properties). A janela Propriedades (Properties) para ClassifiedsTutorial é exibida.
Clique em Conexões JDBC (JDBC Connections).
Em Propriedades da Conexão JDBC (JDBC Connection properties), clique em Novo (New). O diálogo Procura de Perfil (Profile Browse) é exibido.
No diálogo Procura de Perfil (Profile Browse), clique em New (Novo). O diálogo Novo Perfil de Conexão (New Connection Profile) é exibido.
Na lista Tipos de Perfis de Conexão (Connection Profile Types), selecione Derby e, em seguida, clique em Avançar (Next).O diálogo Criar Perfil de Conexão é exibido.
No campo Name (Nome), digite DerbyDB, selecione Autoconexão na inicialização (Auto-connect at startup) e, em seguida, clique em Avançar (Next).
No campo Drivers, selecione Derby 10.2 - Driver JDBC Integrado Padrão (Derby 10.2 - Embedded JDBC Driver Default).
No campo Local do banco de dados, clique em Procurar (Browse) e selecione <workspace_location>\ClassifiedsTutorial\WebContent\database, em que <workspace_location> é o diretório de seu espaço de trabalho atual. Clique em OK.
Talvez seja necessário digitar um ID de Usuário para acessar o banco de dados. Não é necessária uma senha.
Dica: Qualquer ID de Usuário funcionará.
No assistente Novo Perfil de Conexão do Derby (New Derby Connection Profile), clique em Concluir (Finish).
No diálogo Procura de Perfil (Profile Browse), clique em DerbyDB e, em seguida, clique em OK.

Você pode navegar pelos arquivos no projeto da Web do tutorial. Para abrir um arquivo, dê um clique duplo nele na visualização Explorador Corporativo (Enterprise Explorer). Para visualizar uma representação em mapa de como as páginas estão relacionadas, dê um clique duplo em Navegação do Web Site (Web Site Navigation) no Explorador Corporativo (Enterprise Explorer).

A maioria do trabalho nesta amostra envolverá os seguintes arquivos:

all_records.jsp: Esta é a home page do site. Ela exibe todos os anúncios classificados no banco de dados.
new_record.jsp: Essa página criará um novo anúncio classificado.
update_record.jsp: Esta página altera os detalhes sobre um anúncio no banco de dados ou o exclui.
classifiedTemplate.jtpl: Esse é o modelo para as páginas do site. Inclui elementos como a tabela e o banner "Bem-vindo aos Classificados" cinza que estão em todas as páginas. Essa página também tem duas guias de navegação abaixo do banner cinza que levam à página inicial e à página de novo anúncio classificado.

Lições neste módulo

Lição 2.1: Formatar uma Tabela de Dados
A tabela de dados na página all_records.jsp tem uma aparência utilitária. Ela exibe todos os registros no banco de dados e links para as outras páginas como foi projetada para fazer, mas não é muito atraente. Neste exercício, você melhorará essa tabela de dados incluindo um paginador, regras de estilo e imagens dos itens à venda.
Lição 2.2: Utilize o Componente Upload de Arquivo
Utilize essa lição para aprender como fornecer aos usuários a capacidade de fazer upload de imagens para os anuncios classificados. Essa função é particularmente importante nas páginas new_record.jsp e update_record.jsp. O componente upload de arquivo permite que os usuários procurem em seus sistemas de arquivos, façam upload de um arquivo para o banco de dados e façam com que esse arquivo seja mostrado no banco de dados imediatamente.
Lição 2.3: Utilizar Regras de Navegação
Nessa lição, você aprenderá como configurar as regras de navegação para redirecionar um usuário do site às páginas da Web específicas.
Lição 2.4: Utilizar Geração Automática de Chaves
Na lição anterior, você configurou regras de navegação para certificar-se de que os usuários digitassem um ID exclusivo para o novo anúncio classificado. Esse processo é frustante e pouco realista, pois você não gostaria que seus usuários do site localizem um único ID por tentativa e erro. Nesta lição, você configurará a geração de tecla automática para fazer com que o banco de dados designe um número exclusivo a cada novo registro no banco de dados automaticamente.
Módulo 2: Resumo
Você concluiu o Módulo 2: Incluir Recursos Avançados.