pucpr-webdev-basics

Glória Maria Deitos Gomes da Silva
02.Dezembro.2024

pucpr-webdev-basics

Disciplina: Fundamentos de Programação Web
Curso: Análise e Desenvolvimento de Sistemas
Instituição: Pontifícia Universidade Católica do Paraná (PUCPR) - Brasil

Site Front-End - Atividade Somativa 2

Descrição da Atividade

Esta etapa tem como objetivo a criação de uma aplicação web full-stack, integrando front-end e back-end. Utilizando as linguagens HTML, CSS, JavaScript, PHP e SQL, será desenvolvido um sistema completo com funcionalidades de CRUD, autenticação de usuários e um banco de dados MySQL para armazenamento das informações.

Estrutura do Projeto

O projeto é estruturado em várias etapas para contemplar a integração de front-end e back-end:

1. Área de Negócio:
   O domínio da aplicação será definido pelo aluno (ex.: comércio eletrônico, academia esportiva, rede social, entre outros). Este domínio determina os dados que serão mantidos no banco de dados.

2. Base de Dados MySQL:
   • Pelo menos duas tabelas relacionadas (1xN) serão criadas para armazenar os dados essenciais.
   • Será incluída uma tabela adicional para usuários e senhas criptografadas, para controle de login e autenticação.
   • Tabelas preenchidas com dados iniciais para demonstração do CRUD.
3. Autenticação de Usuários:
   • Sistema de login que garante o acesso apenas a usuários autenticados.
   • Tratamento de erros para logins inválidos.
   • Funcionalidade de cadastro para novos usuários.
   • Logout que impede acesso após a saída do sistema.
4. Front-End Padronizado:
   • Interface desenvolvida em HTML, CSS e JavaScript.
   • Possibilidade de utilização de frameworks CSS, como Bootstrap ou W3.CSS, para estilização.
   • Formulários validados utilizando JavaScript e outras técnicas.
5. Back-End com PHP:
   • Funcionalidades CRUD implementadas no back-end com PHP para interação com o banco de dados:
     • INSERT: Inserção de novos registros.
     • SELECT: Consulta de registros no banco.
     • UPDATE: Atualização de registros existentes.
     • DELETE: Exclusão de registros.
6. Integração Completa:
   • Operações de CRUD acessíveis apenas para usuários autenticados.
   • Navegação fluida entre as páginas, com menus e rodapés padronizados.

Entrega

1. Conjunto de Arquivos do Site:
   • Arquivos do projeto compactados em um único arquivo .ZIP.
2. Vídeo de Defesa:
   • Explicação detalhada da aplicação e funcionalidades em um vídeo de até 10 minutos.
   • Roteiro:
     • Apresentação do autor.
     • Navegação pela aplicação e explicação das funcionalidades.
     • Demonstração do banco de dados e estrutura das tabelas.
     • Demonstração das operações de CRUD e autenticação.

---

PUCPR - Fundamentos de Programação Web - Novembro 2024

Site Front-End - Atividade Somativa 1

Descrição da Atividade

Esta etapa contém a implementação da Atividade Somativa 1 de Front-End, onde foi desenvolvido um site utilizando exclusivamente HTML, CSS e JavaScript. O objetivo é demonstrar a proficiência nos conceitos fundamentais dessas tecnologias sem o uso de frameworks ou bibliotecas externas.

Estrutura do Projeto

O site é composto por quatro páginas principais:

• index.html: Página inicial do site.
• form.html: Página com um formulário para captação e validação de dados.
• formAction.html: Página que recebe e trata os dados enviados pelo formulário via método GET com JavaScript.
• about.html: Página informativa sobre o site, incluindo a apresentação do trabalho e do autor.

Funcionalidades

• Menu Uniforme: Navegação consistente em todas as páginas, construída com HTML e estilizada com CSS.
• Formulário Validado: Validação dos campos com JavaScript e outras técnicas apropriadas.
• Interatividade: Dinamicidade adicionada com JavaScript, como manipulação de estilos e validação de dados.
• Código Organizado: Arquivos separados por tipo (HTML, CSS, JavaScript e imagens), com referências feitas utilizando caminhos relativos.

Apresentação

Além dos arquivos do site, será disponibilizado um vídeo de até 5 minutos explicando a navegação, funcionalidades e códigos desenvolvidos.

Entrega:

• Arquivo compactado (.ZIP) com todos os arquivos do site.
• Link do vídeo (.MP4) de apresentação não listado no YouTube.

---

🎥Vídeos de entrega

Atividade Somativa 1 Vídeo demonstrando os resultados e entregas da primeira atividade.

Atividade Somativa 2 Vídeo apresentando os resultados e desenvolvimento da segunda atividade.

---

📄 Enunciados

Dentro da pasta Enunciados, estão os enunciados detalhados de cada uma das atividades que compõem este projeto.