PHP

API RESTful – Guia Passo a Passo Criar uma com PHP e JavaScript:

Dev
•
27 de julho de 2025
•
10 min de leitura
API RESTful

As APIs RESTful são fundamentais no desenvolvimento web moderno, permitindo a comunicação eficiente entre sistemas. Neste artigo, você aprenderá como criar uma API RESTful com PHP e JavaScript, passo a passo, com exemplos práticos. Vamos construir uma API simples em PHP para gerenciar uma lista de tarefas e consumi-la no frontend com JavaScript. Este tutorial é ideal para desenvolvedores iniciantes e intermediários que desejam integrar backend e frontend de forma prática.

O que é uma API RESTful?

Uma API RESTful (Representational State Transfer) é um conjunto de regras que permite a comunicação entre cliente (como um navegador) e servidor usando métodos HTTP, como GET, POST, PUT e DELETE. Ela é amplamente usada por sua simplicidade e escalabilidade, sendo perfeita para aplicações web modernas.

Por que usar PHP e JavaScript?

  • PHP: Uma linguagem robusta para backend, amplamente usada (segundo a W3Techs, em 2025, PHP é a linguagem server-side mais utilizada, presente em grande parte dos sites).
  • JavaScript: Ideal para criar interfaces dinâmicas no frontend e consumir APIs de forma assíncrona.

Pré-requisitos

Antes de começar, você precisará de:

  • Um servidor local (como XAMPP ou WAMP) com PHP instalado.
  • Conhecimento básico de PHP e JavaScript.
  • Um editor de código (como VS Code).
  • Um navegador com ferramentas de desenvolvedor para testar a API.

Passo 1: Configurando o Backend com PHP

Vamos criar uma API RESTful em PHP para gerenciar uma lista de tarefas armazenada em um banco de dados MySQL. A API permitirá criar, listar, atualizar e excluir tarefas.

1.1. Configurando o Banco de Dados

Crie um banco de dados chamado tasks_db e uma tabela tasks com a seguinte estrutura:

CREATE DATABASE tasks_db;
USE tasks_db;

CREATE TABLE tasks (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    description TEXT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

1.2. Criando a Estrutura do Projeto

Crie uma pasta chamada api no diretório do seu servidor (por exemplo, htdocs no XAMPP). Dentro dela, crie os seguintes arquivos:

  • config.php: Conexão com o banco de dados.
  • tasks.php: Lógica da API.
  • index.html: Frontend com JavaScript.

config.php:

<?php
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');

$host = 'localhost';
$db = 'tasks_db';
$user = 'root';
$pass = '';

try {
    $pdo = new PDO("mysql:host=$host;dbname=$db", $user, $pass);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    echo json_encode(['error' => 'Connection failed: ' . $e->getMessage()]);
    exit;
}
?>

Este arquivo configura a conexão com o banco de dados e habilita o CORS para permitir requisições do frontend.

1.3. Construindo a API

No arquivo tasks.php, implemente os métodos GET, POST, PUT e DELETE para gerenciar tarefas.

tasks.php:

<?php
require 'config.php';

$method = $_SERVER['REQUEST_METHOD'];

switch ($method) {
    case 'GET':
        // Listar todas as tarefas
        $stmt = $pdo->query('SELECT * FROM tasks');
        $tasks = $stmt->fetchAll(PDO::FETCH_ASSOC);
        echo json_encode($tasks);
        break;

    case 'POST':
        // Criar uma nova tarefa
        $data = json_decode(file_get_contents('php://input'), true);
        $title = $data['title'] ?? '';
        $description = $data['description'] ?? '';

        if (!empty($title)) {
            $stmt = $pdo->prepare('INSERT INTO tasks (title, description) VALUES (?, ?)');
            $stmt->execute([$title, $description]);
            echo json_encode(['message' => 'Task created successfully']);
        } else {
            echo json_encode(['error' => 'Title is required']);
        }
        break;

    case 'PUT':
        // Atualizar uma tarefa
        $data = json_decode(file_get_contents('php://input'), true);
        $id = $data['id'] ?? 0;
        $title = $data['title'] ?? '';
        $description = $data['description'] ?? '';

        if ($id && !empty($title)) {
            $stmt = $pdo->prepare('UPDATE tasks SET title = ?, description = ? WHERE id = ?');
            $stmt->execute([$title, $description, $id]);
            echo json_encode(['message' => 'Task updated successfully']);
        } else {
            echo json_encode(['error' => 'ID and title are required']);
        }
        break;

    case 'DELETE':
        // Excluir uma tarefa
        $id = $_GET['id'] ?? 0;
        if ($id) {
            $stmt = $pdo->prepare('DELETE FROM tasks WHERE id = ?');
            $stmt->execute([$id]);
            echo json_encode(['message' => 'Task deleted successfully']);
        } else {
            echo json_encode(['error' => 'ID is required']);
        }
        break;

    default:
        echo json_encode(['error' => 'Method not allowed']);
        break;
}
?>

Este script lida com os quatro métodos HTTP principais, manipulando operações CRUD (Create, Read, Update, Delete) na tabela tasks.

Passo 2: Criando o Frontend com JavaScript

Agora, vamos criar uma interface simples em HTML e JavaScript para consumir a API.

index.html:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gerenciador de Tarefas</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .task { border: 1px solid #ccc; padding: 10px; margin: 10px 0; }
        button { margin-left: 5px; }
    </style>
</head>
<body>
    <h1>Gerenciador de Tarefas</h1>
    <form id="taskForm">
        <input type="text" id="title" placeholder="Título da Tarefa" required>
        <textarea id="description" placeholder="Descrição"></textarea>
        <button type="submit">Adicionar Tarefa</button>
    </form>
    <div id="tasks"></div>

    <script>
        const apiUrl = 'http://localhost/api/tasks.php';

        // Listar tarefas
        async function fetchTasks() {
            const response = await fetch(apiUrl);
            const tasks = await response.json();
            const tasksDiv = document.getElementById('tasks');
            tasksDiv.innerHTML = '';
            tasks.forEach(task => {
                const taskDiv = document.createElement('div');
                taskDiv.className = 'task';
                taskDiv.innerHTML = `
                    <h3>${task.title}</h3>
                    <p>${task.description || ''}</p>
                    <button onclick="updateTask(${task.id})">Editar</button>
                    <button onclick="deleteTask(${task.id})">Excluir</button>
                `;
                tasksDiv.appendChild(taskDiv);
            });
        }

        // Adicionar tarefa
        document.getElementById('taskForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const title = document.getElementById('title').value;
            const description = document.getElementById('description').value;

            await fetch(apiUrl, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ title, description })
            });
            fetchTasks();
            e.target.reset();
        });

        // Atualizar tarefa
        async function updateTask(id) {
            const title = prompt('Novo título:', '');
            const description = prompt('Nova descrição:', '');
            if (title) {
                await fetch(apiUrl, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ id, title, description })
                });
                fetchTasks();
            }
        }

        // Excluir tarefa
        async function deleteTask(id) {
            if (confirm('Deseja excluir esta tarefa?')) {
                await fetch(`${apiUrl}?id=${id}`, { method: 'DELETE' });
                fetchTasks();
            }
        }

        // Carregar tarefas ao iniciar
        fetchTasks();
    </script>
</body>
</html>

Este código cria uma interface onde o usuário pode adicionar, listar, editar e excluir tarefas, consumindo a API via requisições HTTP.

Passo 3: Testando a API

  1. Inicie o servidor local (XAMPP/WAMP).
  2. Acesse http://localhost/api/index.html no navegador.
  3. Adicione uma tarefa preenchendo o formulário.
  4. Verifique se a tarefa aparece na lista.
  5. Teste as funções de editar e excluir.

Use as ferramentas de desenvolvedor do navegador (F12) para monitorar as requisições e respostas da API.

Dicas de Otimização

  • Segurança: Valide e sanitize as entradas do usuário no PHP para evitar SQL Injection.
  • Escalabilidade: Considere usar frameworks como Laravel (PHP) para projetos maiores.
  • SEO: Use palavras-chave relacionadas, como “API RESTful PHP”, “consumir API com JavaScript”, em subtítulos e no texto para melhorar o ranqueamento.
  • Performance: Otimize o banco de dados com índices e cacheie respostas da API, se necessário.

Conclusão

Criar uma API RESTful com PHP e JavaScript é uma habilidade valiosa para desenvolvedores web. Neste tutorial, você aprendeu a construir uma API para gerenciar tarefas e consumi-la no frontend com JavaScript. Com esta base, você pode expandir a API para projetos mais complexos, como sistemas de e-commerce ou aplicativos colaborativos.

Próximos passos:

  • Adicione autenticação à API.
  • Integre frameworks como Vue.js ou React no frontend.
  • Explore ferramentas como Postman para testar a API.

Se você quer aprofundar seus conhecimentos em PHP, confira cursos como os oferecidos pela Rocketseat, que cobrem desde o básico até frameworks como Laravel.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *