Curso de FrontendTutorial3 min de leitura

Operações, CRUD, banco de dados e Laragon

Banco de dados local com Laragon e CRUD

Entenda operações CRUD, banco de dados e como usar o Laragon para trabalhar com MySQL localmente.

  • #Curso de Frontend
  • #Banco de Dados
  • #CRUD
  • #Banco de Dados
  • #Laragon
  • #MySQL

O que são operações?

Em desenvolvimento, operação é uma ação que o sistema executa. Pesquisar, cadastrar, editar e apagar são exemplos comuns.

Na etapa de backend do curso, vamos começar pela operação de leitura: buscar registros no banco e devolver os resultados para o frontend.

O que é CRUD?

CRUD representa quatro operações principais: criar, ler, atualizar e excluir.

Você não precisa implementar tudo agora. A tabela abaixo serve para conectar cada operação ao método HTTP usado normalmente em APIs.

Lendo a tabela: Create, Read, Update e Delete são nomes conceituais. POST, GET, PUT, PATCH e DELETE são métodos HTTP usados para representar essas ações em uma API.

Create: POST
Read: GET
Update: PUT ou PATCH
Delete: DELETE

O que é banco de dados?

Banco de dados é onde a aplicação guarda informações de forma organizada. Uma tabela é parecida com uma planilha, com colunas e linhas.

No nosso caso, a tabela se chamará search_results. Cada linha será um resultado de busca e cada coluna guardará uma parte desse resultado.

Lendo a estrutura: search_results é o nome da tabela. id identifica cada linha, title guarda o título, description guarda o texto descritivo, url guarda o link e category guarda a categoria usada na busca.

search_results
  id
  title
  description
  url
  category

Por que usar banco de dados?

Use banco quando os dados precisam ser consultados, filtrados, atualizados ou compartilhados por mais de uma parte do sistema.

Antes, o projeto de busca podia ler dados de um JSON local. Agora, o backend buscará esses dados no banco e enviará para o frontend.

Abrindo o Laragon

Abra o Laragon pelo menu iniciar do Windows. Na janela do Laragon, clique em Start All para iniciar os serviços locais.

Depois de iniciar, procure a opção de banco de dados no próprio Laragon. Dependendo da instalação, você pode abrir o cliente pelo botão Database ou pelo menu Menu > MySQL. Use o cliente disponível na sua instalação para executar os comandos SQL dos próximos passos.

Para este curso, vamos usar uma conexão local com os dados abaixo. Se você configurou uma senha para o usuário root, use a sua senha no lugar de senha em branco.

Host: localhost
Porta: 3306
Usuário: root
Senha: em branco ou a senha configurada

Criando o banco

No cliente de banco aberto pelo Laragon, crie uma nova consulta ou aba SQL. Cole o comando abaixo e execute.

Depois de executar, confirme se o banco frontend_course_backend aparece na lista de bancos. Se aparecer, ele está pronto para receber a tabela da busca.

Lendo o SQL: CREATE DATABASE cria o banco, IF NOT EXISTS evita erro se ele já existir, CHARACTER SET utf8mb4 ajuda a aceitar acentos e emojis, COLLATE define a regra de comparação de textos e USE seleciona o banco para os próximos comandos.

CREATE DATABASE IF NOT EXISTS frontend_course_backend
CHARACTER SET utf8mb4
COLLATE utf8mb4_unicode_ci;

USE frontend_course_backend;

Compartilhar

Voltar ao blog
Avatar 3D de argila do Close Luca
Sobre o autor45 artigos publicados

Luca

Desenvolvedor de software

Desenvolvedor de software, criador de projetos web e entusiasta de game design. Escreve sobre programação, desenvolvimento de jogos, produtividade e tecnologia aplicada a produtos digitais.

Compre pelo link do canal
Continue lendo
Ver todos os artigos
SQL para criar tabela e dados de busca
Curso de Frontend4 min

SQL do zero e criando os dados da busca

Entenda o que é SQL e crie uma tabela com dados para consumir no frontend pela página de busca.

Ler artigo
Rota GET em Node.js consultando banco de dados
Curso de Frontend5 min

Criando uma rota GET para buscar dados no banco

Crie uma rota GET no backend Node.js com Express para buscar dados no banco MySQL.

Ler artigo
Integração de React com backend usando Axios e Context
Curso de Frontend5 min

Integrando o frontend com Axios, Context e .env

Integre o frontend React com o backend Node.js usando Axios, Context API e variável de ambiente.

Ler artigo