Projeto Toque Mágico - Sistema de Agendamento
1. Visão Geral e Tecnologias Utilizadas
O projeto 'Toque Mágico' visa permitir que clientes agendem serviços com uma cabeleireira freelancer
especializada em tranças.
Funcionalidades incluídas:
- Agendamento de serviços
- Cadastro e login de clientes
- Painel da cabeleireira para visualizar agendamentos
- Integração com pagamentos via eMola, mPesa e transferência bancária BCI
As tecnologias utilizadas são:
- HTML5 e CSS3: Estrutura e estilo da página
- Bootstrap 4: Layout responsivo
- PHP com PDO: Lógica de backend e segurança no banco de dados
- SQL: Criação e consultas à base de dados
- JavaScript: Interatividade e validação no frontend
- jQuery e Ajax: Comunicação assíncrona sem recarregar a página
2. Banco de Dados - SQL
Estrutura inicial da base de dados com tabelas de usuários, serviços e agendamentos.
CREATE DATABASE toque_magico;
USE toque_magico;
CREATE TABLE usuarios (
id INT AUTO_INCREMENT PRIMARY KEY,
nome VARCHAR(100),
email VARCHAR(100) UNIQUE,
senha VARCHAR(255),
tipo ENUM('cliente', 'admin') DEFAULT 'cliente'
);
CREATE TABLE servicos (
id INT AUTO_INCREMENT PRIMARY KEY,
nome VARCHAR(100),
preco DECIMAL(10,2)
);
CREATE TABLE agendamentos (
id INT AUTO_INCREMENT PRIMARY KEY,
usuario_id INT,
servico_id INT,
Projeto Toque Mágico - Sistema de Agendamento
data DATE,
hora TIME,
status_pagamento ENUM('pendente', 'pago') DEFAULT 'pendente',
FOREIGN KEY (usuario_id) REFERENCES usuarios(id),
FOREIGN KEY (servico_id) REFERENCES servicos(id)
);
3. Conexão com o Banco de Dados (PHP + PDO)
Arquivo PHP para conectar com segurança à base de dados usando PDO.
// conexao.php
<?php
$host = 'localhost';
$db = 'toque_magico';
$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) {
die("Erro na conexão: " . $e->getMessage());
}
?>
4. Cadastro e Login de Usuários (PHP + HTML)
Formulário para registrar usuários e arquivo para validar login.
<!-- cadastro.html -->
<form method="POST" action="registrar.php">
<input type="text" name="nome" placeholder="Nome" required>
<input type="email" name="email" placeholder="Email" required>
<input type="password" name="senha" placeholder="Senha" required>
<button type="submit">Registrar</button>
</form>
// registrar.php
<?php
include 'conexao.php';
$nome = $_POST['nome'];
$email = $_POST['email'];
$senha = password_hash($_POST['senha'], PASSWORD_DEFAULT);
$stmt = $pdo->prepare("INSERT INTO usuarios (nome, email, senha) VALUES (?, ?, ?)");
Projeto Toque Mágico - Sistema de Agendamento
$stmt->execute([$nome, $email, $senha]);
echo "Usuário registrado com sucesso!";
?>
5. Interface de Agendamento (HTML5 + Bootstrap 4)
Formulário responsivo para agendar um serviço com campos obrigatórios.
<!-- agendar.html -->
<form id="formAgendamento">
<input type="date" name="data" required>
<input type="time" name="hora" required>
<select name="servico_id" id="servicos"></select>
<button type="submit">Agendar</button>
</form>
6. Estilização com CSS3
Estilo básico adicional para além do Bootstrap.
/* estilo.css */
body {
background-color: #fefefe;
font-family: Arial, sans-serif;
}
form {
background-color: #fff;
padding: 15px;
border-radius: 10px;
}
7. Interatividade com JavaScript, jQuery e Ajax
Validação de formulários e envio assíncrono para agendamento.
<script>
$(document).ready(function() {
$.get("listar_servicos.php", function(data) {
$('#servicos').html(data);
});
$('#formAgendamento').submit(function(e) {
e.preventDefault();
$.post("salvar_agendamento.php", $(this).serialize(), function(resp) {
Projeto Toque Mágico - Sistema de Agendamento
alert(resp);
});
});
});
</script>
8. Painel da Cabeleireira (Admin)
Interface protegida para visualizar agendamentos pendentes e confirmar pagamentos.
// admin.php
<?php
include 'conexao.php';
session_start();
$stmt = $pdo->query("SELECT a.id, u.nome, s.nome AS servico, a.data, a.hora, a.status_pagamento
FROM agendamentos a
JOIN usuarios u ON a.usuario_id = u.id
JOIN servicos s ON a.servico_id = s.id");
$agendamentos = $stmt->fetchAll();
?>
<table>
<tr><th>Cliente</th><th>Serviço</th><th>Data</th><th>Hora</th><th>Status</th></tr>
<?php foreach ($agendamentos as $a): ?>
<tr>
<td><?= $a['nome'] ?></td>
<td><?= $a['servico'] ?></td>
<td><?= $a['data'] ?></td>
<td><?= $a['hora'] ?></td>
<td><?= $a['status_pagamento'] ?></td>
</tr>
<?php endforeach; ?>
</table>
9. Integração com Pagamento (Instruções para eMola, mPesa e BCI)
Exibição de instruções para o cliente realizar o pagamento após agendamento.
<!-- pagamento.html -->
<h4>Formas de Pagamento:</h4>
<ul>
<li><strong>eMola:</strong> Envie para +258 84 000 0000</li>
<li><strong>mPesa:</strong> Envie para +258 82 111 1111</li>
<li><strong>BCI:</strong> NIB: 0001000400000123456789</li>
</ul>
