CRUD-With-Database

Descrição

SEM RESPONSIVIDADE

Simulando uma tabela de clientes em um sistema de uma empresa, este projeto foi desenvolvido com o intuito de treinar estruturação de tabelas com HTML, manipulação do DOM com Javascript adicionando/editando/removendo linhas da tabela e armazenamento/manipulação de dados no localStorage.

A tabela foi dividida em 4 colunas: Nome, Nome de Usuário, Email e Ação. Na coluna de ações foram incluidos botões de confirmação(aparece somente se a linha estiver sendo editada), de edição(adicionando inputs que permitem a escrita em cada coluna de informação) e de remoção(removendo toda a linha e apagando os dados do localStorage). Nela, todos os dados são armazenados, editados e removidos em tempo real no localStorage.

Etapas

Criação do Layout:

• Cabeçalho com logo(nome), menu de navegação(Página Inicial/Sobre/ADMIN) e usuário;

• Corpo do site com a tabela do CRUD, e uma área de pesquisa de usuário;

• Estilização do cabeçalho;

• Estilização do corpo do site;

Criando Funcionalidades:

• Adicionar nova linha ao cliclar no botão adicionar;

• Adicionar linha pronta para ser preenchida;

• Editar linha ao clicar no botão de editar;

• Remover linha ao clicar no botão de remover;

• Remover novas linhas criadas;

• Manter alteração dos dados;

• Filtragem de dados;

Banco de Dados:

• Armazenando todos os dados no localStorage;

• Impedir que os dados seja triplicados;

• Verificação de lista vazia;

• Exibir dados do localStorage;

• Remover dado do localStorage ao remover linha da tabela;

• Alterar dados na lista e no localStorage;

Extra:

• Armazenar no banco de dados Firebase;

Tecnologias

Hospedagem:

Imagens

📷 Página Única

Depoimento

17 dias desenvolvendo esse projeto, muito erros e acertos até aqui(30/12/2022). Além disso, último projeto do ano entregue no penúltimo dia do mesmo. Normalmente eu me dedicaria apenas 10 dias e partiria para o próximo, mas devido a um mês turbulento e com viagem programada durante o desenvolvimento do projeto, tive que adiar essa entrega, não conseguiria prosseguir para o próximo projeto diante de um tão promissor. Aprendi MUITO com este projeto, fiquei dias batalhando contra o banco de dados Firebase até pedir uma trégua e usar o localStorage para armazenas os dados(Ainda não desisti, em breve estarei substituindo o banco de dados). Nos últimos dois dias praticamente refiz o javascript para deixar do jeito que eu pretendia. Estou muito satisfeito com este e espero que gostem também!

Contato | Redes Sociais

Desenvolvedores

Felipe Pereira de Lima