Banco de Dados com AJAX

Introdução

Neste artigo, vamos explorar como usar PHP, AJAX e bancos de dados para criar páginas web dinâmicas que melhoram a experiência e o envolvimento do utilizador.

O que é PHP?

PHP é uma linguagem de scripting do lado do servidor utilizada para desenvolver aplicações web. PHP é fácil de aprender e é compatível com vários sistemas operativos, como Linux, macOS e Windows. PHP possui uma vasta gama de aplicações, desde o desenvolvimento de páginas web até à criação de aplicações desktop independentes.

O que é AJAX?

AJAX é uma técnica utilizada no desenvolvimento web que permite que as páginas web sejam atualizadas de forma assíncrona sem necessidade de recarregar a página inteira. AJAX permite a criação de páginas web dinâmicas que podem responder à entrada do utilizador em tempo real.

O que é um Banco de Dados?

Um banco de dados é uma coleção estruturada de dados que pode ser acedida, gerida e atualizada. Os bancos de dados são utilizados no desenvolvimento web para armazenar dados que podem ser consultados e manipulados para fornecer conteúdo dinâmico aos utilizadores.

Usando PHP, AJAX e Bancos de Dados para Criar Páginas Web Dinâmicas

PHP, AJAX e bancos de dados podem ser usados em conjunto para criar páginas web dinâmicas que proporcionam uma experiência de utilizador rica. Para isso, é necessário seguir os seguintes passos:

1. Estabelecer uma ligação ao banco de dados usando PHP
2. Obter dados do banco de dados usando PHP
3. Criar um script do lado do servidor para tratar a requisição AJAX
4. Usar AJAX para atualizar a página web com os dados obtidos

Estabelecendo uma Ligação ao Banco de Dados

Para estabelecer uma ligação ao banco de dados, é necessário usar o construtor da classe mysqli do PHP. Este construtor recebe o nome do host do banco de dados, o nome de utilizador, a palavra-passe e o nome do banco de dados como argumentos. Após estabelecer a ligação, é possível executar consultas SQL para manipular os dados no banco de dados. Por segurança, valide e sanitize sempre a entrada do utilizador.

$conn = new mysqli("localhost", "username", "password", "database");
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

sequenceDiagram
    participant User
    participant Browser
    participant WebServer
    participant PHPHandler
    participant Database
    User->>Browser: Triggers Ajax event
    Browser->>WebServer: Sends asynchronous request
    WebServer->>PHPHandler: Routes to connect.php
    PHPHandler->>Database: Executes query
    Database->>PHPHandler: Returns result set
    PHPHandler->>Browser: Sends response
    Browser->>User: Updates DOM dynamically

Obtendo Dados do Banco de Dados

Para obter dados do banco de dados, é necessário usar consultas SQL. As consultas SQL podem ser executadas usando o método $conn->query() em PHP. O resultado da consulta é devolvido como um conjunto de resultados que pode ser percorrido para obter as linhas de dados individuais.

$sql = "SELECT id, name FROM users";
$result = $conn->query($sql);
if (!$result) {
    die("Query failed: " . $conn->error);
}
while ($row = $result->fetch_assoc()) {
    echo $row["name"] . "<br>";
}

Criando o Handler do Lado do Servidor (connect.php)

A requisição AJAX no código do lado do cliente chama connect.php. Este ficheiro deve combinar a ligação ao banco de dados, a execução da consulta e a lógica de saída num único script funcional. Também trata os possíveis erros de forma adequada.

<?php
$conn = new mysqli("localhost", "username", "password", "database");
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT id, name FROM users";
$result = $conn->query($sql);

if ($result) {
    while ($row = $result->fetch_assoc()) {
        echo $row["name"] . "<br>";
    }
} else {
    echo "Error: " . $conn->error;
}
$conn->close();
?>

Usando AJAX para Atualizar a Página Web

Após obter os dados do banco de dados, pode usar AJAX para atualizar a página web com os dados obtidos. AJAX permite atualizar uma parte da página web sem ter de recarregar a página inteira. Para isso, é necessário criar um objeto XMLHttpRequest em JavaScript e enviar uma requisição para um script do lado do servidor (por exemplo, connect.php). Assim que o servidor enviar a resposta, pode atualizar a página web com os dados obtidos.

<div id="data-container">Loading...</div>
<button onclick="loadData()">Load Data</button>

function loadData() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'connect.php', true);
    xhr.onload = function() {
        if (xhr.status === 200) {
            document.getElementById('data-container').innerHTML = xhr.responseText;
        } else {
            document.getElementById('data-container').innerHTML = 'Error loading data.';
        }
    };
    xhr.onerror = function() {
        document.getElementById('data-container').innerHTML = 'Network error.';
    };
    xhr.send();
}

Conclusão

PHP, AJAX e bancos de dados funcionam em conjunto para criar aplicações web dinâmicas e interativas. Seguindo os passos acima, pode criar páginas responsivas que atualizam o conteúdo sem recarregar a página.

Prática