Site com MySQL Local

Cheatsheet Content

### Introdução ao Desenvolvimento Web com MySQL Local Este cheatsheet cobre os passos essenciais para criar um site simples com um backend que utiliza um banco de dados MySQL local. Abordaremos a configuração, a conexão e operações básicas de CRUD (Criar, Ler, Atualizar, Excluir). #### Pré-requisitos - **XAMPP/WAMP/MAMP:** Para Apache, MySQL e PHP (ou similar). - **Editor de Código:** VS Code, Sublime Text, etc. - **Navegador Web:** Chrome, Firefox, etc. ### Configuração do Ambiente 1. **Instalar XAMPP/WAMP/MAMP:** - Baixe e instale a versão apropriada para seu sistema operacional. - Inicie os módulos `Apache` e `MySQL` no painel de controle. 2. **Acessar phpMyAdmin:** - Abra seu navegador e vá para `http://localhost/phpmyadmin`. - Esta é a interface gráfica para gerenciar seu banco de dados MySQL. ### Criação do Banco de Dados e Tabela 1. **Criar um Novo Banco de Dados:** - No phpMyAdmin, clique em "New" (Novo) no menu lateral esquerdo. - Digite o nome do banco de dados (ex: `meusite_db`) e clique em "Create" (Criar). 2. **Criar uma Tabela:** - Com `meusite_db` selecionado, digite o nome da tabela (ex: `usuarios`) e o número de colunas (ex: 3). Clique em "Create" (Criar). - Defina as colunas da tabela `usuarios`: - `id`: `INT`, `PRIMARY KEY`, `AUTO_INCREMENT` - `nome`: `VARCHAR(255)` - `email`: `VARCHAR(255)` - Clique em "Save" (Salvar). ### Estrutura Básica do Projeto Crie uma pasta no diretório `htdocs` do XAMPP (ou `www` do WAMP/MAMP). Ex: `C:/xampp/htdocs/meusite`. ``` meusite/ ├── index.php ├── config.php └── style.css ``` ### Conexão com o Banco de Dados (config.php) Crie o arquivo `config.php` para estabelecer a conexão com o MySQL. ```php connect_error) { die("Falha na conexão: " . $conn->connect_error); } // echo "Conexão bem-sucedida!"; // Opcional: para testar a conexão ?> ``` ### Exibir Dados (index.php - Leitura) Crie o arquivo `index.php` para exibir dados da tabela `usuarios`. ```php query($sql); ?> Lista de Usuários Usuários Cadastrados num_rows > 0) { echo " "; echo " ID Nome Email "; // Saída de dados de cada linha while($row = $result->fetch_assoc()) { echo " " . $row["id"]. " " . $row["nome"]. " " . $row["email"]. " "; } echo " "; } else { echo " Nenhum usuário encontrado. "; } $conn->close(); // Fecha a conexão ?> ``` ### Adicionar Dados (index.php - Criação) Para adicionar dados, você precisará de um formulário e um script para processá-lo. #### Formulário no `index.php` (abaixo da tabela) ```html Adicionar Novo Usuário Nome: Email: ``` #### Criar `adicionar.php` ```php query($sql) === TRUE) { echo "Novo registro criado com sucesso!"; } else { echo "Erro: " . $sql . " " . $conn->error; } $conn->close(); header("Location: index.php"); // Redireciona de volta para a página principal exit(); } ?> ``` ### Estilo Básico (style.css) Crie o arquivo `style.css` para um estilo visual mínimo. ```css body { font-family: Arial, sans-serif; background-color: #f4f4f4; color: #333; margin: 0; padding: 20px; } .container { max-width: 800px; margin: 20px auto; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h1, h2 { color: #0056b3; } table { width: 100%; border-collapse: collapse; margin-top: 20px; } table, th, td { border: 1px solid #ddd; } th, td { padding: 10px; text-align: left; } th { background-color: #007bff; color: white; } tr:nth-child(even) { background-color: #f2f2f2; } form { margin-top: 20px; padding: 15px; border: 1px solid #eee; border-radius: 5px; background-color: #f9f9f9; } form label { font-weight: bold; } form input[type="text"], form input[type="email"] { width: calc(100% - 22px); padding: 10px; margin-top: 5px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; } form input[type="submit"] { background-color: #28a745; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } form input[type="submit"]:hover { background-color: #218838; } ``` ### Considerações de Segurança (Importante!) - **SQL Injection:** O exemplo de `adicionar.php` é **vulnerável** a SQL Injection. Para produção, use Prepared Statements: ```php // Exemplo de Prepared Statement para INSERT $stmt = $conn->prepare("INSERT INTO usuarios (nome, email) VALUES (?, ?)"); $stmt->bind_param("ss", $nome, $email); // "ss" indica que ambos são strings if ($stmt->execute()) { echo "Novo registro criado com sucesso!"; } else { echo "Erro: " . $stmt->error; } $stmt->close(); ``` - **Validação de Entrada:** Sempre valide e sanitize os dados de entrada do usuário.