Olá leitores do blog Cursos Legais! É um prazer tê-los aqui para explorar o empolgante processo de conectar páginas web a bancos de dados sem o uso da linguagem PHP. Se você está ansioso para aprender a criar aplicações web dinâmicas usando tecnologias alternativas, 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 páginas web e bancos de dados usando diferentes abordagens.

Passo 1: Introdução à Ligação entre Páginas Web e Bancos de Dados Sem PHP

Vamos começar nossa jornada entendendo a abordagem de ligação entre páginas web e bancos de dados sem o uso da linguagem PHP.

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 uma página web e um banco de dados usando tecnologias alternativas.

Instale um Servidor Web e Banco de Dados: Você pode usar XAMPP, WAMP ou qualquer outro servidor web local e o MySQL para o banco de dados.
Crie uma Pasta para o Projeto: Crie uma pasta chamada "ligacao-web-banco-dados-no-php" em seu diretório de projetos.

Exemplo 1: Listagem de Dados do Banco de Dados usando JavaScript e APIs

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

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

html
<!DOCTYPE html>
<html>
<head>
    <title>Listagem de Dados do Banco de Dados</title>
</head>
<body>
    <h1>Listagem de Usuários</h1>
    <ul id="listaUsuarios"></ul>
    <script>
        fetch('usuarios.json')
            .then(response => response.json())
            .then(data => {
                const listaUsuarios = document.getElementById('listaUsuarios');
                data.forEach(usuario => {
                    const listItem = document.createElement('li');
                    listItem.textContent = `ID: ${usuario.id} - Nome: ${usuario.nome}`;
                    listaUsuarios.appendChild(listItem);
                });
            });
    </script>
</body>
</html>

Crie um arquivo chamado "usuarios.json" na mesma pasta com o seguinte conteúdo:

json
[
    {"id": 1, "nome": "Alice"},
    {"id": 2, "nome": "Bob"},
    {"id": 3, "nome": "Carol"}
]

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

Passo 3: Cadastro de Dados no Banco de Dados usando Formulários e APIs

Vamos aprender como inserir dados em um banco de dados através de uma página web sem o uso da linguagem PHP:

Exemplo 2: Formulário de Cadastro e Inserção de Dados usando Fetch API

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

html
<!DOCTYPE html>
<html>
<head>
    <title>Cadastro de Usuário</title>
</head>
<body>
    <h1>Cadastro de Usuário</h1>
    <form id="formulario">
        Nome: <input type="text" id="nome"><br>
        <input type="submit" value="Cadastrar">
    </form>
    <script>
        const formulario = document.getElementById('formulario');
        formulario.addEventListener('submit', async (event) => {
            event.preventDefault();
            const nome = document.getElementById('nome').value;
            const response = await fetch('usuarios.json', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ nome })
            });
            const data = await response.json();
            console.log(data);
        });
    </script>
</body>
</html>

Exemplo 3: Cadastro de Dados no Banco de Dados usando Firebase Realtime Database

Acesse o Console do Firebase em https://console.firebase.google.com/.
Crie um projeto e siga as instruções para configurá-lo.
Clique em "Database" no menu esquerdo e escolha "Realtime Database".
Clique em "Criar banco de dados" e escolha o modo "Iniciar no modo de produção".
Crie um arquivo chamado "index.html" com o seguinte conteúdo:

html
<!DOCTYPE html>
<html>
<head>
    <title>Cadastro de Usuário</title>
</head>
<body>
    <h1>Cadastro de Usuário</h1>
    <form id="formulario">
        Nome: <input type="text" id="nome"><br>
        <input type="submit" value="Cadastrar">
    </form>
    <script src="https://www.gstatic.com/firebasejs/9.1.2/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.1.2/firebase-database.js"></script>
    <script>
        const firebaseConfig = {
            apiKey: "sua-api-key",
            authDomain: "seu-dominio.firebaseapp.com",
            databaseURL: "https://seu-dominio-default-rtdb.firebaseio.com",
            projectId: "seu-id-do-projeto",
            storageBucket: "seu-id-do-projeto.appspot.com",
            messagingSenderId: "seu-id",
            appId: "seu-app-id"
        };
        firebase.initializeApp(firebaseConfig);

        const formulario = document.getElementById('formulario');
        formulario.addEventListener('submit', (event) => {
            event.preventDefault();
            const nome = document.getElementById('nome').value;
            const database = firebase.database();
            const usuariosRef = database.ref('usuarios');
            usuariosRef.push({ nome })
                .then(() => console.log('Usuário cadastrado com sucesso!'))
                .catch(error => console.error('Erro no cadastro:', error));
        });
    </script>
</body>
</html>

Conclusão

Parabéns! Você concluiu este curso passo a passo sobre como ligar uma página web a um banco de dados sem o uso da linguagem PHP. Agora você tem as habilidades necessárias para criar aplicações web dinâmicas que interagem de forma eficaz com bancos de dados usando diferentes tecnologias e abordagens.

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 e aprimorando suas habilidades em desenvolvimento web e banco de dados!

Como ligar paginas web a banco de dados sem PHP