Olá leitores do blog Cursos Legais! É um prazer tê-los aqui para explorar o emocionante processo de conectar o front end e o back end no desenvolvimento web. Se você está ansioso para aprender a criar aplicações completas, funcionais e interativas, você está no lugar certo. Neste curso passo a passo, vamos cobrir desde os conceitos básicos até a construção de 10 exemplos práticos de ligação entre o front end e o back end usando diferentes tecnologias.

Passo 1: Introdução à Ligação Front End e Back End

Vamos começar nossa jornada entendendo a importância e o funcionamento da ligação entre o front end e o back end em uma aplicação web.

Passo 2: Configuração do Ambiente e Primeiro Exemplo

Antes de mergulharmos nos exemplos de código, precisamos configurar nosso ambiente e criar um exemplo simples de ligação entre front end e back end.

Instale um Servidor Web: Você pode usar XAMPP, WAMP ou qualquer outro servidor web local.
Crie uma Pasta para o Projeto: Crie uma pasta chamada "ligacao-frontend-backend" em seu diretório de projetos.

Exemplo 1: Exemplo Simples de Ligação

Crie um arquivo chamado "index.html" na pasta do projeto:

html
<!DOCTYPE html>
<html>
<head>
    <title>Exemplo de Ligação</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>Exemplo de Ligação entre Front End e Back End</h1>
    <button id="btnEnviar">Enviar Dados</button>
    <div id="resultado"></div>
</body>
</html>

Crie um arquivo chamado "script.js" na mesma pasta:

javascript
document.getElementById("btnEnviar").addEventListener("click", function() {
    fetch("backend.php")
        .then(response => response.text())
        .then(data => {
            document.getElementById("resultado").innerHTML = data;
        });
});

Crie um arquivo chamado "backend.php" na mesma pasta:

php
<?php
echo "Dados do Back End";
?>

Acesse o projeto através do servidor web para ver o exemplo em ação.

Passo 3: Comunicação com Dados

Vamos aprender como enviar e receber dados entre o front end e o back end:

Exemplo 2: Enviando Dados do Front End para o Back End

Crie um arquivo chamado "index.html" com o seguinte conteúdo:

html
<!DOCTYPE html>
<html>
<head>
    <title>Comunicação de Dados</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>Comunicação de Dados</h1>
    <input type="text" id="inputTexto" placeholder="Digite algo">
    <button id="btnEnviar">Enviar</button>
    <div id="resultado"></div>
</body>
</html>

Crie um arquivo chamado "script.js" com o seguinte conteúdo:

javascript
document.getElementById("btnEnviar").addEventListener("click", function() {
    const inputTexto = document.getElementById("inputTexto").value;
    
    fetch("backend.php", {
        method: "POST",
        body: JSON.stringify({ texto: inputTexto }),
        headers: {
            "Content-Type": "application/json"
        }
    })
    .then(response => response.text())
    .then(data => {
        document.getElementById("resultado").innerHTML = data;
    });
});

Crie um arquivo chamado "backend.php" com o seguinte conteúdo:

php
<?php
$input = json_decode(file_get_contents("php://input"), true);
$texto = $input["texto"];
echo "Texto enviado do Front End: " . $texto;
?>

Passo 4: Integração com Banco de Dados

Vamos aprender como conectar o front end e o back end a um banco de dados:

Exemplo 3: Listagem de Dados do Banco de Dados

Crie um banco de dados chamado "exemplo" e uma tabela "usuarios" com colunas "id" e "nome".

Crie um arquivo chamado "index.html" com o seguinte conteúdo:

html
<!DOCTYPE html>
<html>
<head>
    <title>Integração com Banco de Dados</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>Integração com Banco de Dados</h1>
    <button id="btnListar">Listar Usuários</button>
    <ul id="listaUsuarios"></ul>
</body>
</html>

Crie um arquivo chamado "script.js" com o seguinte conteúdo:

javascript
document.getElementById("btnListar").addEventListener("click", function() {
    fetch("backend.php")
        .then(response => response.json())
        .then(data => {
            const listaUsuarios = document.getElementById("listaUsuarios");
            listaUsuarios.innerHTML = "";
            
            data.forEach(usuario => {
                const itemLista = document.createElement("li");
                itemLista.textContent = "ID: " + usuario.id + " - Nome: " + usuario.nome;
                listaUsuarios.appendChild(itemLista);
            });
        });
});

Crie um arquivo chamado "backend.php" com o seguinte conteúdo:

php
<?php
$conexao = new mysqli("localhost", "root", "", "exemplo");

if ($conexao->connect_error) {
    die("Erro na conexão: " . $conexao->connect_error);
}

$sql = "SELECT id, nome FROM usuarios";
$resultado = $conexao->query($sql);

$usuarios = array();

if ($resultado->num_rows > 0) {
    while ($linha = $resultado->fetch_assoc()) {
        $usuarios[] = $linha;
    }
}

$conexao->close();

header("Content-Type: application/json");
echo json_encode($usuarios);
?>

Conclusão

Parabéns! Você concluiu este curso passo a passo sobre a ligação entre o front end e o back end. Agora você tem as ferramentas necessárias para criar aplicações web completas e interativas, permitindo que o front end e o back end trabalhem juntos de forma eficiente.

Sobre o Autor

Este curso foi elaborado por Rodrigo Ferreira da Silva, um analista de desenvolvedor de sistemas e big data apaixonado por compartilhar conhecimento sobre programação e tecnologia.

Continue explorando as possibilidades de desenvolvimento web e aprimorando suas habilidades técnicas!

Como ligar o FrondEnd com o BackEnd