Resumo da Live TikTok 25/10/2024 – Desvendando o Código

Olá Pessoal!

Na Live do dia 25/10/2024 trabalhamos com JavaScript e MySql.

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inserir Cliente</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Inserir Cliente</h1>
    <form action="/inserirCliente" method="post">
        <label for="nome">Nome:</label><br>
        <input type="text" id="nome" name="nome" required><br>
        <label for="email">Email:</label><br>
        <input type="email" id="email" name="email" required><br>
        <label for="telefone">Telefone:</label><br>
        <input type="text" id="telefone" name="telefone"><br>
        <label for="endereco">Endereço:</label><br>
        <input type="text" id="endereco" name="endereco"><br><br>
        <input type="submit" value="Inserir Cliente">
    </form>
</body>
</html>

CSS

{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
padding: 20px;
}

h1 {
text-align: center;
margin-bottom: 20px;
color: #2c3e50;
}

form {
background-color: #ffffff;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
max-width: 400px;
margin: 0 auto;
}

label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

input[type="text"],
input[type="email"] {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}

input[type="submit"] {
background-color: #3498db;
color: white;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}

input[type="submit"]:hover {
background-color: #2980b9;
}

APP.JS

const express = require('express');
const mysql = require('mysql2');
const bodyParser = require('body-parser');
const path = require('path');

const app = express();
const port = 3000;

//CONFIGURAR CONEXAO COM O BANCO
const connection = mysql.createConnection( {
host: '127.0.0.1',
user: 'root',
password: '123456',
database: 'aula'
//port: '3306'

});

//CONECTAR AO BANCO DE DADOS
connection.connect(err =>{
if(err){
console.error('Erro ao conectar ao banco!');
return;
}
console.log('Conectado ao banco!');
});

//CONFIGURAR O BODY-PARSER
app.use( bodyParser.urlencoded( { extended: true }));

//CONFIGURAR O ARQUIVO ESTATICO
app.use( express.static( path.join(__dirname)));

// SERVIR O FORMULARIO
app.get('/', (req, res) =>{
res.sendFile(path.join(__dirname, 'index.html'));
});

//PROCESSAR OS DADOS DO FORMULARIO

app.post('/inserirCliente', (req, res)=>{

   const { nome, email, telefone, endereco } = req.body;
   const sql = 'CALL inserirCliente(?, ?, ?, ?)'; 
   connection.query(sql, [nome, email, telefone, endereco], (err, results)=>{

    if(err){
        console.error('Erro ao inserir cliente:', err);
        res.send('Erro ao inserir cliente.');
        return;
    }
    res.send('Cliente inserido com sucesso!');

   });

});

//INICIAR O SERVIDOR
app.listen(port,()=>{
console.log(Servidor rodando em http://localhost:${port});
});