Desenvolvimento de Software para Web (SI e CC)

Dados gerais sobre a disciplina (SI)

Código: QXD0020

Curso: Sistemas de Informação

Turma: 5º Período

Turno: Manhã

Carga Horária: 64h

Local: Bloco 1 - Sala 3 (Segunda) (HDMI) / Bloco 1 - Laboratório 4 (Quarta) (VGA)

Horários: Segunda das 10h às 12h e Quarta das 08h às 10h

Dados gerais sobre a disciplina (CC)

Código: QXD0020e

Curso: Ciência da Computação

Turma: 5º Período

Turno: Manhã

Carga Horária: 64h

Local: Bloco 1 - Laboratório 2 (Segunda) (VGA) / Bloco 2 - Sala 3 (Terça)

Horários: Segunda e Terça das 08h às 10h

Site

http://bit.ly/ufcregis

Downloads

Plano de Ensino (SI - CC)
Slides
- 0 - Apresentação da Disciplina
- 1 - HTML (FJ11 - Cap2, FJ11 - Cap3)
- 2 - CSS (FJ11 - Cap4, FJ11 - Cap5, FJ11 - Cap6)
- 3 - Bootstrap (FJ11 - Cap10)
- 4 - JavaScript (FJ11 - Cap11)
  - A re-introduction to JavaScript (JS tutorial)
- 5 - jQuery (FJ11 - Cap12)
- 6 - Servlets (FJ21 - Cap5)
  - Slides Servlets e AJAX com jQuery
  - AJAX (na Apostila da Caelum FJ28 - Cap12 - Importante: Ela usa o VRaptor e não Servlets nos exemplos, mas as explicações sobre AJAX são boas)
- 7 - JSP (FJ21 - Cap6, FJ21 - Cap7, FJ21 - Cap8)
- 8 - Criação de Aplicações Web com Maven a partir do Eclipse (Slides)
  - Ver também:
    - Slides Maven (genérico e não específico para criação de aplicações Web via Eclipse)
    - Apostila da Caelum FJ16 - Cap10
- 9 - JDBC, DAO e JPA (Slides)
  - Ver também:
- 10 - MVC (Slides)
  - Ver também:
    - Apostila da Caelum FJ21 - Cap9 - MVC
- 11 - Spring Boot (Slides)
  - Spring Boot Reference Guide (HTML - PDF)
  - Projeto Exemplo Spring Boot 01
  - REST (na Apostila da Caelum FJ28 - Cap11 - Importante: Ela usa o VRaptor e não o Spring Boot nos exemplos, mas as explicações sobre REST são ótimas!!!)
  - Serviços Web REST
  - Como criar uma API REST
  - Sistema do NPI de Prontuário Eletrônico das Clínicas de Odontologia da UFC (Usa Spring Boot + JPA)
  - Aplicação exemplo de uso do Spring Boot + REST + AJAX NOVO!!!
    - Se não souber usar o Git, não tem problema. Baixe o ZIP acessando: Clone or download --> Download ZIP.
  - Aplicação exemplo de uso do Spring Boot + CRUD + DAO NOVO!!!
    - Se não souber usar o Git, não tem problema. Baixe o ZIP acessando: Clone or download --> Download ZIP.
  - Aplicação exemplo de uso do Spring Boot + CRUD + JpaRepository NOVO!!!
    - Se não souber usar o Git, não tem problema. Baixe o ZIP acessando: Clone or download --> Download ZIP.

Bibliografia

Básica
- Caelum WD-43 – Desenvolvimento Web com HTML, CSS e JavaScript (HTML - PDF).
- Caelum FJ-21 – Java para Desenvolvimento Web (HTML - PDF)
Complementar
- LUCKOW, Décio Heinzelmann; MELO, Alexandre Altair. Programação Java para a Web. São Paulo: Novatec Editora, 2010.
- K19 Treinamentos. K12 - Desenvolvimento Web com JSF2 e JPA2.
- KURNIAWAN, Budi. Java para a Web com Servlets, JSP e EJB. Rio de Janeiro: Ciência Moderna, 2002.
- GEARY, David; HORSTMANN, Cay. Core JavaServer Faces. 3. ed. Rio de Janeiro, RJ: Alta Books, 2012.
- GONÇALVES, Edson. Desenvolvendo aplicações Web com NetBeans IDE 6. Rio de Janeiro: Ciência Moderna, 2008.
- BASHAM, Bryan. Use a cabeça!: Sevlets & JSP. 2. ed. Rio de Janeiro, RJ: Alta Books, 2008.
- MOREIRA NETO, Oziel. Entendendo e dominando o Java para internet. 2. ed. São Paulo: Digerati Books, 2009.
- FREEMAN, Elisabeth; FREEMAN, Eric. Use a cabeça!: HTML com CSS e XHTML. 2. ed. Rio de Janeiro, RJ: Alta Books, 2008.
- Caelum FJ16 - Testes, XML e Design Patterns (HTML - PDF)

Listas de Exercícios (a entrega deverá ser realizada pelo SIPPA)

Lista de Exercícios 01 (prazo final para entrega: 20/03/2017 - segunda-feira até às 23:59)
1. Crie uma página HTML que use o texto do seguinte documento.
  - a) A página HTML criada deve conter pelo menos 5 elementos em bloco e 5 elementos em linha.
  - b) A página HTML deve conter pelo menos uma imagem relacionada ao seu conteúdo (use uma imagem qualquer escolhida por você).
2. Crie uma página HTML que contenha uma tabela com os índices de inflação usados no Brasil.
  - Obs: Tais índices atualizados podem ser consultados em: https://economia.uol.com.br/cotacoes/
3. Crie uma página HTML com um formulário para cadastro de dados pessoais como: CPF, Nome, Telefone, Email e Data de Nascimento.
Lista de Exercícios 02 (prazo final para entrega: 27/03/2017 - segunda-feira)
1. Use CSS para estilizar as páginas criadas por você na Lista de Exercícios 01.
  - Crie um único arquivo CSS externo a ser usado e compartilhado pelas 3 páginas criadas da Lista 01.
  - Todas as páginas devem ter um cabeçalho, um container geral com seu conteúdo e um rodapé.
2. Use os conteúdos do arquivo caelum-arquivos-curso-web.zip para criar uma página HTML semelhante à página home sugerida na apostila WD-43 da Caelum (veja imagem clicando aqui).
  - Use HTML5 e CCS3.
  - OBS: A apostila WD-43 da Caelum mostra o passo a passo de como construir tal página.
Lista de Exercícios 03 (prazo final para entrega: 03/04/2017 - segunda-feira)
1. Faça o exercício proposto nos slides da disciplina sobre Bootstrap (32 passos).
  - Em caso de dúvida, siga os detalhes mencionados na apostila WD-43 da Caelum.
2. Crie uma página de notícias usando o Bootstrap.
  - As notícias devem ser apresentadas em 3 colunas no desktop e em somente 1 coluna no celular.
  - Use textos e imagens reais de algum site de notícias já existente.
  - Use o componente Carousel para mostrar as notícias em destaque no topo da página.
  - Use conteúdos personalizados em thumbnails (miniaturas de imagens).
3. Use o Bootstrap para melhorar o visual das questões 2 (tabela com os índices de inflação usados no Brasil) e 3 (formulário para cadastro de dados pessoais) da Lista de Exercícios 01.
  - As tabela e o formulário devem aparecer em abas diferentes de uma única página HTML.
    - Ou seja: as questões 2 e 3 da Lista 01 vão ficar integradas em uma única página HTML.
  - A tabela deve destacar a linha sobre a qual o ponteiro do mouse passa por cima.
  - O formulário deve aparecer em uma modal, após o clique de um botão para que ele apareça.
Lista de Exercícios 04 (prazo final para entrega: 10/04/2017 - segunda-feira)
- OBS: Esta lista exercita a autonomia do aluno para entender e usar o jQuery em algumas questões, mesmo que o jQuery ainda não tenha sido apresentado em detalhe durante as aulas.
- Em todas as questões defina eventos usando Javascript e não diretamente no código HTML.
1. Crie uma página HTML com um formulário para obter preço e quantidade. Exibir em um elemento input, desabilitado para edição, o valor total (preço x quantidade) dinamicamente quando preço ou quantidade forem alterados. Usar JavaScript puro (sem jQuery).
2. Crie a mesma funcionalidade da Questão 1 em uma nova página HTML, através da substituição do elemento <input> por um elemento <output>.
  - Veja um exemplo de uso do elemento <output> neste link. Use o evento oninput, mas não diretamente no HTML como no exemplo.
3. Crie uma página HTML para calcular e exibir na tela: (1) o valor do Índice de Massa Corporal (IMC) e (2) sua classificação, fazendo uso de entrada de dados (massa e altura de uma pessoa) em formulário HTML e cálculo dinâmico do resultado do IMC via JavaScript puro (sem jQuery).
4. Crie a mesma funcionalidade da Questão 4 em uma nova página HTML, usando o jQuery.
5. Crie uma página HTML que possui um caractere texto que segue o movimento do ponteiro do mouse pela tela. Usar JavaScript puro (sem jQuery).
  - Dica: altere a posição (x, y) do caractere texto de acordo com a mudança da posição (x, y) do ponteiro do mouse na tela.
6. Crie a mesma funcionalidade da Questão 6 em uma nova página HTML, usando o jQuery.
7. Crie uma página HTML de notícias com poucas notícias (no minimo 3 notícias) e um botão "Mais notícias", que ao ser clicado exibe mais notícias, que não eram visualizadas antes. Usar o jQuery.

Lista de Exercícios 05 (prazo final para entrega: 24/04/2017 - segunda-feira)
- OBS: Todas as questões desta lista devem ser resolvidas em uma única aplicação Web. Desse modo, você deve enviar um único arquivo WAR contendo toda a aplicação com as resoluções de todas as questões da lista e também com o código fonte. A geração do arquivo WAR pode ser realizada através da opção de Exportação do Eclipse.
- Crie uma única aplicação Web com as funcionalidades abaixo. A página principal da aplicação deverá conter um menu com links para as demais funcionalidades. Os resultados das submissões de formulários devem ocorrer através de Servlets. Crie quantos Servlets você julgar necessário para resolver os itens abaixo.
  1. Em uma página HTML, calcular e exibir na tela: (1) o valor do Índice de Massa Corporal (IMC) e (2) sua classificação, fazendo uso de entrada de dados (massa e altura de uma pessoa) em formulário HTML e cálculo do resultado do IMC via Servlet (sem Javascript). A submissão do formulário leva a apresentação do resultado em uma nova página gerada pelo Servlet.
  2. Obter dois números em um formulário Web e após a submissão deste formulário, exibir a soma e a subtração dos números.
  3. Após o clique em um link, exibir uma sugestão de seis números não repetidos entre 1 e 60 para a mega-sena. Esses números devem ser gerados em um Servlet e retornados para exibição no browser do cliente.

Lista de Exercícios 06 (prazo final para entrega: 01/05/2017 - segunda-feira)
- OBS: Todas as questões desta lista devem ser resolvidas em uma única aplicação Web. Desse modo, você deve enviar um único arquivo WAR contendo toda a aplicação com as resoluções de todas as questões da lista e também com o código fonte. A geração do arquivo WAR pode ser realizada através da opção de Exportação do Eclipse.
- Crie uma única aplicação Web com as funcionalidades abaixo. A página principal da aplicação deverá conter um menu com links para as demais funcionalidades.
  1. Crie uma classe Produto com codigo, nome, descrição e quantidade do produto.
  2. Crie uma página html que mostre alguns produtos com seus respectivos preços e que permita a adição deles em um carrinho de compras (lista de produtos) que deve ser armazenado no contexto de sessão ao chamar um servlet específico.
    - A adição de produtos deve ser feita através de AJAX ao clicar sobre um link ou botão Adicionar.
    - Um botão Mostrar Carrinho deve abrir uma janela Modal para mostrar os itens do Carrinho de Compras.
      - Um Servlet específico deve retornar os itens do carrinho de compras.
      - Este Servlet deve ser chamado via AJAX quando o botão Mostrar Carrinho for clicado para preencher os conteúdos que aparecerão na janela Modal.
  3. Crie um servlet para criar um contador e incrementá-lo a cada acesso a este servlet (A página principal da aplicação chama este servlet). O contador deve ser armazenado em um Cookie no cliente e ter a duração de 1 mês. Depois disso, o servlet deve redirecionar o cliente para uma página html capaz de mostrar o valor atual do contador via JavaScript (ver acesso a valores de cookies via Javascript: https://www.w3schools.com/js/js_cookies.asp).

Lista de Exercícios 07 (prazo final para entrega: 08/05/2017 - segunda-feira)
- OBS: Todas as questões desta lista devem ser resolvidas em uma única aplicação Web. Desse modo, você deve enviar um único arquivo WAR contendo toda a aplicação com as resoluções de todas as questões da lista e também com o código fonte. A geração do arquivo WAR pode ser realizada através da opção de Exportação do Eclipse.
- Crie uma única aplicação Web com as funcionalidades abaixo. A página principal da aplicação (home) deverá conter um menu com links para as demais funcionalidades.
1. Crie uma página html com um formulário de login para preenchimento de usuário e senha.
2. Crie um servlet para login que recebe os parâmetros usuário e senha. Se usuário e senha forem 'admin' e 'teste1234', respectivamente, criar um atributo no escopo de sessão (mecanismo de autenticação). O nome do atributo deve ser 'usuario' e seu valor deve ser 'admin'. Isso significa que o usuário está logado (autenticado). Depois disso, o servlet deve redirecionar o usuário para a página home da aplicação. A opção de login deve estar disponível para acesso na página home, caso o usuário não esteja logado.
3. Crie um servlet para logout. Esse servlet deve eliminar a sessão e redirecionar o usuário para a página home da aplicação. A opção de logout deve estar disponível para acesso em todas as páginas da aplicação, caso o usuário esteja logado.
4. Sua aplicação não deve permitir acesso não autorizado às suas funcionalidades, ou seja, deve ter um mecanismo de autorização. Para isso, crie um filtro que force o login, caso o usuário não esteja logado e tente acessar qualquer página que não seja a página de login.
5. Crie uma lista de tarefas que deve ser armazenada na sessão do usuário logado no sistema. Esta lista deve permitir a inclusão, alteração e remoção de tarefas para cada usuário.
Lista de Exercícios 08 (prazo final para entrega: 15/05/2017 - segunda-feira)
1. Refatore a Lista de Exercícios 05 para que ela possa usar JSP. O Servlet deve continuar gerando os dados, mas sua exibição deve ser feita através de páginas JSP.
  - Evite ao máximo o uso de Scriptlets. Quando precisar usar código Java tente fazê-lo em um Servlet que encaminha o resultado para o JSP.
  - Use Expression Language (EL) sempre que possível.
2. Use em todas as páginas da aplicação um único cabeçalho e um único rodapé que devem ser incluídos (include) no JSP a partir de dois arquivos externos, ou seja, um para o cabeçalho e outro para o rodapé.
3. Crie uma página de erro da aplicação. Em caso de qualquer erro HTTP ou de execução, o usuário deve ser redirecionado para a página de erro.

Lista de Exercícios 09 (prazo final para entrega: 22/05/2017 - segunda-feira)

Refatore a Lista de Exercícios 08 para que ela use JSTL e Tags Personalizadas.

Crie e use ao menos uma Tag Personalizada.
Use as seguintes JSTL:
- core
- formatação

Lista de Exercícios 10 (prazo final para entrega: 29/05/2017 - segunda-feira)
- Crie uma aplicação Web que permita o cadastro e a visualização de Produtos.
  - Um produto deve ter um id, uma descrição e um valor.
  - Os produtos devem ser armazenados no Banco de Dados através do uso de JDBC e do padrão DAO (Data Access Object).
  - Referências:
    - Slides sobre JDBC a DAO da Caelum (veja acima)
    - Cap. 2 da Apostila FJ-21 da Caelum
    - Projeto Exemplo
Lista de Exercícios 11 (prazo final para entrega: 05/06/2017 - segunda-feira)
- Crie um CRUD (Create, Read, Update e Delete) relacionado a uma entidade do seu trabalho final.
  - Um exemplo de tela de CRUD pode ser visto neste link.
  - Sua aplicação deve usar o modelo MVC tendo apenas um único Servlet central genérico e diferentes classes para tratar a lógica de negócio, conforme os slides de número 10 sobre MVC e Apostila da Caelum FJ21 - Cap9 - MVC.
  - O acesso ao banco de dados realizado por sua aplicação deve fazer uso de uma interface DAO. A implementação do DAO pode ser via JDBC ou JPA.
    - Em caso de dúvida veja o projeto exemplo atualizado:
      - Projeto Exemplo
Lista de Exercícios 12 (prazo final para entrega: 12/06/2017 - segunda-feira)
- Refaça a lista 11 substituindo sua implementação de MVC pelo Spring Boot. Isso significa que você deve fazer o CRUD substituindo os Servlets pelos Controladores e Ações do Spring Boot.
  - Procure usar URLs limpas para passagem de parâmetros no estilo REST, ou seja, URLs onde os parâmetros HTTP são substituídos por parâmetros codificados na própria URL.
    - Veja exemplos de URLs limpas: (1) nesta imagem e (2) nesta outra imagem.
  - Um exemplo de aplicação usando Spring MVC para inspirar sua resolução desta lista pode ser encontrado no seguinte endereço:
    - http://www.mkyong.com/spring-mvc/spring-mvc-form-handling-example/
  - O exemplo dado, no entanto, usa somente o Spring MVC puro, sem as facilidades de configurações automáticas providas pelo Spring Boot.
  - Ou seja, o exemplo dado é bem mais prolixo em configurações do que o que podemos fazer com o Spring Boot.
  - Tirando as configurações manuais, os Controladores, as Visões e os Modelos usados na aplicação exemplo são bem parecidos com o que precisamos implementar com o Spring Boot.
  - Veja também esta aplicação real criada pelo NPI (Núcleo de Práticas em Informática) do Campus de Quixadá:
    - Sistema do NPI de Prontuário Eletrônico das Clínicas de Odontologia da UFC (Usa Spring Boot + JPA)
Lista de Exercícios 13 (prazo final para entrega: 19/06/2017 - segunda-feira)
- Melhore a sua solução da lista 12, usando os recursos do Spring Data para acessar JDBC ou JPA. Use os recursos de Injeção de Dependência do Spring e SEJA FELIZ!!!
- Acrescente também a validação do Spring aos seus modelos, controladores e formulários.
  - Dica: Veja a Seção sobre Validação na Apostila da Caelum.
- Dica: Veja os slides atualizados.
- DICA PRINCIPAL: veja a Aplicação exemplo de uso do Spring Boot + CRUD + DAO e a Aplicação exemplo de uso do Spring Boot + CRUD + JpaRepository.
  - Configure o application.properties para acessar o seu banco de dados.
  - Se não souber usar o Git, não tem problema. Baixe o ZIP acessando: Clone or download --> Download ZIP.

Calendário de Avaliações

IMPORTANTE:
- A Segunda Chamada de qualquer uma das provas de DSWEB ocorrerá na quarta-feira (05/07) no Lab4 a partir das 8:00 da manhã.
- Somente pode realizar a Segunda Chamada quem não fez a Primeira Chamada.

Trabalho Final (a entrega deverá ser realizada pelo SIPPA)

Trabalho Final da Disciplina (prazos para entrega: Parte 1 - 17/05/2017 / Parte 2 - ~~26/06/2017~~ ~~03/07/2017~~ 10/07/2017)

O envio da Parte I do Trabalho Final (TF) deve ser realizado através dos endereços:

Trabalho Final DSWEB 2017.1 Turma Ciência da Computação
- http://bit.ly/tf_dsweb_2017_cc
Trabalho Final DSWEB 2017.1 Turma Sistemas de Informação
- http://bit.ly/tf_dsweb_2017_si

O envio da Parte II do Trabalho Final (TF) deve ser realizado através do SIPPA.

Google Sites

Report abuse