Programação III - 2023/2

Trabalho em Grupo
Período de Execução: de 01 de novembro a 13 de dezembro de 2023.
Local de Entrega: Moodle
Componentes: Até 04 pessoas.

Descrição Trabalho
Inicialmente os estudantes devem reunir-se em grupos com no máximo 04
componentes.
Após a composição do grupo enviem um e-mail ao professor
(gleison.nascimento@restinga.ifrs.edu.br), informando a composição do grupo.
Pode ser enviado um e-mail por grupo. Isso deve ser feito imediatamente após
a formação do grupo.
O trabalho consiste na construção de uma aplicação com frontend e backend
desacoplados, ou seja, a aplicação deve possui dois projetos distintos. Um
projeto web para o frontend e um projeto de backend com a definição de
serviços web (APIs) que serão consumidos para construir as telas no fronend.

1.0 - FRONTEND
O projeto de frontend deve ser desenvolvido apenas com HTML, CSS e
Javascript. Fiquem À vontade para utilizar frameworks como Bootstrap, jQuery
e outros, desde usem apenas as linguagens supracitadas.
Basicamente o projeto deve ter os modelos páginas descritas abaixo.

1.1 - Página de conteúdo estático

A página de conteúdo estático deve conter:
• Banner.
• Menu (horizontal ou vertical).
• Um local para conteúdo, com a descrição textual do negócio que será
desenvolvido (um texto criado pelo grupo descrevendo o negócio do site,
por exemplo a história de uma pizzaria).
• A Figura 1 a seguir mostra um exemplo de página inicial.
Figura 1: Tela inicial da aplicação.
• Requisitos: O layout deve ser criado conforme a criatividade do grupo.
Devem ser feitos com HTML e CSS.
• A página institucional deve ser acessada a partir do primeiro item do
menu principal (por exemplo, Home).
• Na página institucional devem ser colocadas ao menos duas imagens
com descrição textual.
• A descrição do negócio deve ser precedida por um título (h1) formatado
com cores, tamanho e estilos diferentes do padrão usado pelo navegador.
Ou seja, o título deve ser formatado através do CSS.
• Os parágrafos da descrição do negócio devem ser formatados com fonte
Arial ou Verdana, tamanho 12pt e justificados.
◦ Devem existir ao menos três parágrafos.
◦ Um dos parágrafos deve ter cor única, ou seja, se foram descritos
três parágrafos dois devem ser pretos e um deve ser de outra cor
(por exemplo, azul).
◦ A formatação de cor deve ser feita em CSS e com conceito de
classes .

1.2 - Páginas de pesquisa

A página de pesquisa, que deve conter ao menos:
• Banner (idêntico ao banner da primeira página).
• Menu (idêntico ao menu da primeira página).
• Um local para o resultado da pesquisa e formulário de pesquisa.
• O layout de menu e banner deve seguir o padrão usado na página inicial
(primeira página).
• Deve ser implementada com CSS e HTML.
• Deve ser acessada a partir dos demais itens do menu principal.
• A página deve ter um título (h1) formatado com cores, tamanho e estilos
diferentes do padrão usado pelo navegador. Deve ser formatado através
do CSS e ter a mesma formatação do título da primeira página.
• Após o título deve ser adicionado um formulário com dois componentes:
◦ Campo de texto para digitação da palavra chave a ser pesquisada
pelo sistema; e
◦ Botão de ação Filtrar.
◦ O botão filtrar não deve ter a formatação padrão do navegador. Deve
ser formatado com CSS, mudando cor do texto, cor da borda e cor
de fundo.
• Abaixo do formulário de pesquisa deve ter uma tabela de informações e
os botões inserir, atualizar e excluir.
◦ Os botões devem aparecer acima da tabela e devem ser formatados
com CSS, mudando cor do texto, cor da borda e cor de fundo. Os
botões inserir, atualizar e excluir devem ter formatação diferente do
botão Filtrar do formulário de pesquisa.
◦ A tabela deve ter ao menos:
▪ Linha de cabeçalho.
• A linha de cabeçalho deve ter cor de fundo e formatação
do texto (das células) diferentes das demais linhas.
• A primeira célula deve ter o texto Seleção.
▪ Demais linhas serão de dados
• As linhas de dados devem ter cores de fundo e formatação
de texto diferente da linha de cabeçalho.
• A formatação de texto das células deve ser idêntica nas
três linhas, mas a cor de fundo entre as linhas deve ser
alternada. Isto é, linha 1 de dados cinza, linha 2 branca,
linha 3 cinza e assim por diante.
• A Figura 2 mostra um exemplo de página de pesquisa.

Figura 2: Tela de pesquisa .

• Os resultados da pesquisa devem ser obtidos através do consumo de
serviços web criados no projeto de backend.

1.3 - Páginas de formulário

As páginas de formulário de inserção e atualização, devem conter ao menos:
• Banner (idêntico ao banner da primeira página).
• Menu (idêntico ao menu da primeira página).
• Um local para o formulário de cadastro.
• O layout de menu e banner deve seguir o padrão usado na página inicial.
• Devem ser implementadas com CSS e HTML.
• Devem ser acessadas a partir do clique nos botões de inserir ou atualizar.
• A página deve ter um título (h1) formatado com cores, tamanho e estilos
diferentes do padrão usado pelo navegador. Deve ser formatado através
do CSS e ter a mesma formatação do título da primeira página.
• A página deve ter um formulário com os campos necessários para cada
um dos cadastros que serão criados na aplicação
• As validações do formulário devem ser codificadas em HTML e
Javascript, seguindo as restrições existentes nas tabelas de banco de
dados. Isto é, um campo definido na tabela como NOT NULL, deve ter
uma entrada de dados no formulário com validação de obrigatoriedade.
• Os campos dos formulários devem seguir a semântica de implementação
conforme os tipos de dados esperados na tabela. Ou seja, um campo
data de nascimento do tipo date na tabela de banco de dados, deve ser
implementado por uma entrada de dados do tipo date no HTML.
• O formulário também deve ter ao menos dois botões Salvar e Cancelar,
com as mesmas formatações de CSS usadas para os botões inserir,
atualizar e excluir da página anterior. O botão de cancelar deve limpar o
conteúdo digitado no formulário.
• A ação de salvar os dados do formulário devem ser implementadas
através de chamadas aos serviços web implementados no projeto de
backend.
• Da mesma forma, os dados que serão necessários para popular campos
do formulário devem ser obtidos a partir do consumo de serviços web
implementados no projeto de backend.
• A Figura 3 a seguir mostra um exemplo das páginas de formulários.
Figura 3: Tela de formulário.

1.4 - Páginas de processamento

As páginas de processamento devem conter ao menos:
• Banner (idêntico ao banner da primeira página).
• Menu (idêntico ao menu da primeira página).
• Um local para uma mensagem de sucesso ou falha do processamento.
• O layout de menu e banner deve seguir o padrão usado na página inicial.
• Deve ser implementada com CSS e HTML.
• Deve ser acessada a partir do clique no botão de salvar da página de
formulário.
• A mensagem de sucesso ou erro devem ser formatada com CSS, usando
fonte Verdana ou Arial, com tamanho de 12 pontos.
• A mensagem de sucesso deve ser apresentada em azul.
• Já mensagens de erro devem ser apresentadas como lista de itens e na
cor vermelha (por exemplo, a validação de um formulário pode apresentar
vários erros).
• Se a mensagem for de sucesso, então deve ser apresentado um botão de
voltar, que ao ser clicado retorna para página de pesquisa do respectivo
cadastro.
• Se a mensagem for de erro, então deve ser apresentado um botão de
voltar, que ao ser clicado retorna para página de formulário do respectivo
cadastro.
• A Figura 4 mostra um exemplo das páginas de processamento.
Figura 4: Página de processamento.

1.5 - Requisitos Comuns a Todas as páginas:

 O CSS do site deve ser implementado em um arquivo. Não deve ser
usado CSS dentro do HTML.
 O banner deve ter como plano de fundo uma imagem;
 Ao lado de cada item do menu deve existir um ícone;
 O layout apresentado nas imagens de exemplo não deve ser
implementado. Cada grupo deve criar o seu layout conforme sua
criatividade.

2.0 – INTEGRANDO O FRONTEND E O BACKEND

Devem ser implementada uma aplicação web para gerenciamento de uma loja
virtual. A aplicação deve ser constituída dos seguintes itens:
1) Cadastro de Produtos;
2) Cadastro de Clientes;
3) Cadastro de Pedidos;
4) Cadastro de Usuários Administradores;
Os cadastros devem ser acessados de um item de menu como apresenta a
Figura 5.
Figura 5: Menu com os respectivos cadastros da loja virtual.

2.1 – Funcionalidade de Pesqisar

Ao clicar no item de menu “Usuários” deve abrir a listagem de usuários e um
respectivo formulário para realizar a consulta neste cadastro, como mostra a
Figura 5.
Neste exemplo pode ser informado um nome de usuário e ao clicar em Filtrar,
deve ser realizada a consulta ao banco de dados apresentando os usuários
com o nome pesquisa. O resultado é apresentado na tabela abaixo do campo
de filtro.
A pesquisa no banco de dados deve ser construída através de um serviço web
construído no projeto de backend. O serviço deve ser invocado
assincronamente, através de AJAX, retornando para tela de frontend uma
mensagem JSON, contendo os objetos que devem ser apresentados na tabela.
A tabela deve ser populada através do javascript.
A seguir o usuário poderá:
 Inserir um novo usuário;
 Atualizar um registro já existente; ou
 Excluir um usuário.

2.2 – Funcionalidades de Inserção ou Atualização

Ao clicar em Inserir ou atualizar deve abrir o formulário com as informações do
usuário, como mostra a Figura 6.
Quando clicar em inserir o formulário aparece em branco.
Ao clicar no Atualizar o formulário deve estar preenchido com os dados do
usuário selecionado na tabela de consulta. Neste caso, deve ser invocado um
serviço do backend que retorna um objeto de usuário para popular os campos
do formulário. O serviço deve ser invocado assincronamente, através de AJAX,
retornando para tela de frontend uma mensagem JSON, contendo o objeto que
deve ser apresentado no formulário. Os campos devem ser populados através
do javascript.

Figura 6: Tela do Formulário para Cadastro de Usuário.

Ao clicar no botão salvar as informações devem ser salvas no banco (insert ou
update) e a tela de confirmação da operação deve ser apresentada (Figura 7).
Ao clicar no botão cancelar deve retornar a tela da Figura 5.
Figura 7: Tela de Confirmação da Operação de Inserção ou Atualização.

Ao clicar no botão de salvar os dados devem ser submetidos para um serviço

no projeto de backend, que deve inserir ou atualizar o objeto na tabela de
banco de dados. O envio deve ser feito assincronamente por AJAX,
parametrizando o envio com uma mensagem JSON, enviada por método
POST.
Em caso de erro na operação de banco de dados, estes devem ser
apresentados na mesma tela da Figura 7.
Caso a confirmação seja de sucesso o botão voltar deve retornar para a tela de
pesquisa (Figura 5), caso contrário deve retornar ao formulário com os dados
preenchidos (Figura 6).

2.3 – Funcionalidades de Exclsão

Ao clicar em Excluir na Figura 5 deve ser submetido o identificador do usuário
para um serviço no projeto de backend, que executa a exclusão do objeto na
tabela de banco de dados. O envio deve ser feito assincronamente por AJAX,
parametrizando o envio com uma mensagem JSON, enviada por método GET.
Em caso de sucesso ou erro na operação de banco de dados, estes devem ser
apresentados na tela da Figura 7.

2.4 – Banco de Dados

Os quatro cadastros (CRUDs) devem ser implementados usando o script de
banco de dados abaixo.

CREATE DATABASE trabalho;

USE trabalho;
CREATE TABLE usuarios (
cpf VARCHAR(14) NOT NULL COMMENT '000.000.000-00',
nome VARCHAR(100) NOT NULL,
data_nascimento DATE NULL,
email VARCHAR(100) NOT NULL,
telefone VARCHAR(19) NULL COMMENT '+55(00)00000-0000',
whats TINYINT NULL,
 username VARCHAR(15) NOT NULL COMMENT 'Deve conter ao
menos 8 caracteres',
senha VARCHAR(255) NOT NULL COMMENT 'Deve conter ao menos
8 caracteres sendo ao menos uma letra ou um número.',
PRIMARY KEY (cpf)
);

CREATE TABLE clientes (

id INT NOT NULL AUTO_INCREMENT,
nome VARCHAR(100) NOT NULL,
data_nascimento INT NOT NULL,
cpf VARCHAR(14) NOT NULL COMMENT '000.000.000-00',
rg VARCHAR(15) NULL,
orgao_emissor VARCHAR(20) NULL,
sexo ENUM('FEMININO', 'MASCULINO') NOT NULL,
email VARCHAR(100) NOT NULL,
telefone VARCHAR(19) NOT NULL COMMENT '+55(00)00000-0000',
whats TINYINT NULL,
logradouro VARCHAR(200) NULL,
numero VARCHAR(20) NULL,
bairro VARCHAR(100) NULL,
cidade VARCHAR(100) NULL,
estado VARCHAR(2) NULL,
cep VARCHAR(8) NOT NULL,
PRIMARY KEY (id)
);

CREATE TABLE produtos (

id INT NOT NULL AUTO_INCREMENT,
nome VARCHAR(100) NOT NULL,
descricao TEXT NULL,
unidade ENUM('UNI', 'PEC', 'LT', 'KG', 'CX', 'FR', 'GAR')
NOT NULL,
 preco_unitario FLOAT(5,2) NOT NULL,
PRIMARY KEY (id)
);
CREATE TABLE pedidos (
numero INT NOT NULL AUTO_INCREMENT,
data_emissao DATE NOT NULL,
valor_frete FLOAT(5,2) NOT NULL,
data_entrega DATE NULL,
clientes_id INT NOT NULL,
PRIMARY KEY (numero),
FOREIGN KEY (clientes_id) REFERENCES clientes(id)
);

CREATE TABLE produtos_has_pedidos (

produtos_id INT NOT NULL,
pedidos_numero INT NOT NULL,
quantidade INT NOT NULL,
preco_unitario FLOAT(5,2) NOT NULL,
unidade ENUM('UNI', 'PEC', 'LT', 'KG', 'CX', 'FR', 'GAR')
NULL,
PRIMARY KEY (produtos_id, pedidos_numero),
FOREIGN KEY (produtos_id) REFERENCES produtos(id),
FOREIGN KEY (pedidos_numero) REFERENCES pedidos(numero)
);

O sistema também deve apresentar uma tela de login. Apenas usuários

autenticados terão acesso aos CRUDs.

2.5 - Requisitos de Validação no Backend

• Todos os campos devem ser validados, considerando os tipos de dados,
obrigatoriedades e tamanhos apresentados no diagrama entidade-
relacionamento. Por exemplo, o campo telefone na tabela de clientes é
obrigatório e tem tamanho de 13 caracteres. O sistema deve fazer a
 validação desta máscara na própria aplicação (não deixar o banco gerar
um erro).
• O campo senha deve ser gravado no banco de dados usando o código
MD5.
• No formulário de pedidos devem ser apresentados além dos campos
dispostos na tabela, outros dois campos calculados: Valor total de cada
produto no pedido; Valor total do pedido. Esses campos não devem ser
salvos no banco de dados. Devem ser calculados pela aplicação ao abrir o
cadastro de um pedido ou ao adicionar um novo produto.
• Nos formulários de clientes e usuários o campo CPF deve ser validado de
acordo com o algoritmo de validação de CPF da receita federal.
• No formulário de clientes deve-se digitar primeiro o campo CEP e ao sair
do campo deve-se consultar o serviço web “Via CEP” para encontrar o
logradouro, bairro, cidade e estado do cep digitado pelo usuário. Atenção:
não deve ser adicionado um botão para realizar tal consulta. O algoritmo
deve executar após a saída do campo CEP. A URL do serviço é:
viacep.com.br/ws/{valor digitado para cep}/json/