https://github.com/gloriadeitos/pucpr-webdev-basics
Este repositório contém dois projetos de desenvolvimento web: uma aplicação full-stack com CRUD, autenticação de usuário e MySQL, e um site front-end construído com HTML, CSS e JavaScript, focando nos conceitos essenciais de desenvolvimento web.
https://github.com/gloriadeitos/pucpr-webdev-basics
basics crud web
Last synced: 4 months ago
JSON representation
Este repositório contém dois projetos de desenvolvimento web: uma aplicação full-stack com CRUD, autenticação de usuário e MySQL, e um site front-end construído com HTML, CSS e JavaScript, focando nos conceitos essenciais de desenvolvimento web.
- Host: GitHub
- URL: https://github.com/gloriadeitos/pucpr-webdev-basics
- Owner: gloriadeitos
- Created: 2024-11-18T14:08:09.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-22T00:09:10.000Z (about 1 year ago)
- Last Synced: 2025-04-22T00:29:36.852Z (about 1 year ago)
- Topics: basics, crud, web
- Language: HTML
- Homepage: https://gloriadeitos.github.io/pucpr-webdev-basics/
- Size: 5.65 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
#### 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.