Este projeto é uma aplicação simples desenvolvida com Flask, que permite cadastrar e listar produtos. A aplicação inclui estilização com CSS e interatividade com JavaScript.
-
Cadastro de Produtos:
- Nome do Produto
- Descrição
- Valor
- Disponibilidade (Sim/Não)
-
Listagem de Produtos:
- Mostra os produtos cadastrados.
- Ordenação dos produtos por valor (do menor para o maior).
- Exibe as colunas: Nome, Valor e Disponível.
-
Estilização e Interatividade:
- Interface estilizada com CSS.
- Interatividade usando JavaScript (ex.: clique em uma linha da tabela para mostrar os detalhes do produto).
Certifique-se de que possui os seguintes requisitos instalados:
- Python 3.7+
- Pip (gerenciador de pacotes Python)
- Virtualenv (opcional, mas recomendado)
git clone <URL_DO_REPOSITORIO>
cd <NOME_DO_DIRETORIO>Crie o ambiente virtual:
python -m venv venvAtive o ambiente:
- Windows:
venv\Scripts\activate
- Linux/Mac:
source venv/bin/activate
Instale as dependências do projeto:
pip install flaskNo terminal, inicie o servidor Flask:
python app.pyAbra o navegador e acesse:
http://127.0.0.1:5000/
/project-root
/static
style.css # Arquivo CSS para estilização
script.js # Arquivo JavaScript para interatividade
/templates
cadastrar.html # Página de cadastro de produtos
listagem.html # Página de listagem de produtos
app.py # Aplicação principal Flask
-
Backend:
- Desenvolvido com Flask, uma micro-framework para Python.
- O arquivo
app.pygerencia as rotas:/: Página de listagem./cadastrar: Página de cadastro.
-
Frontend:
- Utiliza HTML, CSS (em
style.css) e JavaScript (emscript.js). - A estilização inclui:
- Tabela responsiva.
- Botões estilizados.
- Destaque nas linhas ao passar o mouse.
- Utiliza HTML, CSS (em
-
Arquivos Estáticos:
- Os arquivos CSS e JavaScript estão localizados na pasta
static. - Referenciados no HTML usando a função
url_fordo Flask.
- Os arquivos CSS e JavaScript estão localizados na pasta
- Adicionar persistência de dados com um banco de dados como SQLite ou PostgreSQL.
- Implementar validação de formulário no frontend.
- Melhorar a responsividade para dispositivos móveis.
Este projeto é de uso livre para fins de aprendizado e prática. Sinta-se à vontade para modificar e expandir conforme necessário.
Se tiver dúvidas ou sugestões, sinta-se à vontade para contribuir! 😊