Pesquisar neste blog

Mostrando postagens com marcador HTML. Mostrar todas as postagens
Mostrando postagens com marcador HTML. Mostrar todas as postagens

29/06/2023

CRUD com PHP

Objetivo: Fazer um CRUD em PHP

Saída do designer em PHP














Arquivo 1: cadastrar_pessoa.php

<?php
// 6 funções
Class Pessoa{


    private $pdo;
    // CONEXÃO COM O BANCO DE DADOS
    public function __construct($dbname, $host, $user, $senha) // tudo ok
    {
        try
        {
            $this->pdo = new PDO("mysql:dbname=".$dbname.";host=".$host,$user);
        }
        catch (PDOException $e) {//erro para o PDO
            echo "Erro com o Banco de Dados: ".$e->getMessage();
            exit();
        }
        catch(Exception $e){ // Erros genéricos
            echo "Erro genérico: ".$e->getMessage();
            exit();
        }
    }
    //------- BUSCAR DADOS E EXIBIR NO LADO DIREITO DA TELA ----------
    public function buscarDados() // tudo ok
    {
        $res = array();
        $cmd = $this->pdo->query("SELECT * FROM pessoa ORDER BY id");
        $res = $cmd->fetchAll(PDO::FETCH_ASSOC);// economiza memória
        return $res;
    }
    // FUNÇÃO DE CADASTRAR PESSOAS NO BANCO DE DADOS
    public function cadastrarPessoa($nome, $telefone, $email)
    {
        // Antes de cadastrar verificar se já tem o EMAIL cadastrado
        $cmd = $this->pdo->prepare("SELECT id FROM pessoa WHERE email = :e");
        $cmd->bindValue(":e", $email);
        $cmd->execute();
        if ($cmd->rowCount() > 0)  //se > 0 email já existe no BD
        {
            return false;
        }else  // não foi encontrado no BD
        {
            $cmd = $this->pdo->prepare("INSERT INTO pessoa(nome, telefone, email)
            VALUES (:n, :t, :e)");
            $cmd->bindValue(":n", $nome);
            $cmd->bindValue(":t", $telefone);
            $cmd->bindValue(":e", $email);
            $cmd->execute();
            return true;
        }
    }
    // MÉTODO PARA EXCLUIR PESSOA
    public function excluirPessoa($id) // tudo ok
    {
        $cmd = $this->pdo->prepare("DELETE FROM pessoa WHERE id = :id");
        $cmd->bindValue(":id", $id);
        $cmd->execute();
    }

    // BUSCAR DADOS DE UMA PESSOA
    public function buscarDadosPessoa($id) // tudo ok
    {
        $res = array();
        $cmd = $this->pdo->prepare("SELECT * FROM pessoa WHERE id = :id");
        $cmd->bindValue(":id", $id);
        $cmd->execute();
        $res = $cmd->fetch(PDO::FETCH_ASSOC);//economiza memória
        return $res;
    }

    // ATUALIZAR DADOS NO BANCO DE DADOS
   
    public function atualizarDados($id, $nome, $telefone, $email){ // tudo ok
       
        $cmd = $this->pdo->prepare("UPDATE pessoa SET nome = :n, telefone = :t,
        email = :e WHERE id = :id");
        $cmd->bindValue(":n", $nome);
        $cmd->bindValue(":t", $telefone);
        $cmd->bindValue(":e", $email);
        $cmd->bindValue(":id", $id);
        $cmd->execute();
    }
}
?>


Arquivo 2: index.php

<?php
require_once 'classe_pessoa.php';
$p = new Pessoa("crudpdo", "localhost", "root", "");
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cadastro de Pessoa</title>
    <link rel="stylesheet" href="estilo.css">
</head>
<body>
    <?php
    if (isset($_POST['nome']))
    //CLICOU NO BOTÃO CADASTRAR OU EDITAR
    {
        if (isset($_GET['id_up']) && !empty($_GET['id_up']))
        {
            $id_upd = addslashes($_GET['id_up']);
            $nome = addslashes($_POST['nome']);
            $telefone = addslashes($_POST['telefone']);
            $email = addslashes($_POST['email']);
            if (!empty($nome) && !empty($telefone) && !empty($email))
            {
                $p->atualizarDados($id_upd, $nome, $telefone, $email);
               
                header("location: index.php");
            }
            else
            {
                ?>
                    <div class="aviso">
                        <img src="aviso.png" alt="">
                        <h4>Preencha todos os campos !</h4>
                    </div>
                <?php
            }
        }
        // ---------------------------- CADASTRAR ----------------------------
        else
        {
            $nome = addslashes($_POST['nome']);
            $telefone = addslashes($_POST['telefone']);
            $email = addslashes($_POST['email']);
            if(!empty($nome) && !empty($telefone) && !empty($email))
            {
                //cadastrar
                if (!$p->cadastrarPessoa($nome, $telefone, $email))
                {
                    ?>
                        <div>
                            <img src="aviso.png" alt="">
                            <h4>Email já está cadastrado !</h4>
                        </div>
                    <?php
                }
            }
            else
            {
                ?>
                    <div class="aviso">
                        <img src="aviso.png" alt="">
                        <h4>Preencha todos os campos !</h4>
                    </div>
                <?php
            }
        }
    }
    ?>
    <?php
        if (isset($_GET['id_up'])) //SE A PESSOA CLICOU EM EDITAR
        {
            $id_update = addslashes($_GET['id_up']);
            $res = $p->buscarDadosPessoa($id_update);
        }

    ?>
    <section id = "esquerda">
        <form action="" method = "POST">
            <h2>CADASTRAR PESSOA</h2>
            <label for="nome">Nome</label>
            <input type="text" name = "nome" id = "nome"
            value="<?php if(isset($res)){echo $res['nome'];} ?>">
           
            <label for="telefone">Telefone</label>
            <input type="text" name="telefone" id="telefone"
            value="<?php if(isset($res)){echo $res['telefone'];} ?>">

            <label for="email">Email</label>
            <input type="email" name="email" id="email"
            value= "<?php if(isset($res)) {echo $res['email']; } ?>">

            <input type="submit"
            value= "<?php if (isset($res)) { echo "Atualizar"; }else { echo
    "Cadastrar"; } ?>">
        </form>
    </section>
    <section id="direita">
        <table>
            <tr id="titulo">
                <td>NOME</td>
                <td>TELEFONE</td>
                <td colspan="2">EMAIL</td>
            </tr>
            <?php
                $dados = $p->buscarDados();
                if(count($dados) > 0)//TEM PESSOAS NO BANCO DE DADOS
                {
                    for($i=0; $i < count($dados); $i++)
                    {
                        echo "<tr>";
                        foreach ($dados[$i] as $k => $v)
                        {
                            if($k != "id")
                            {
                                echo "<td>".$v."</td>";
                            }
                        }
                        ?>
                            <td>
                                <?php echo $dados[$i]['id'] ?>                              
                                <a href="index.php?id_up=<?php echo $dados[$i]['id']; ?>">Editar</a>
                                <a href="index.php?id=<?php echo $dados[$i]['id']; ?>">Excluir</a>
                            </td>
                        <?php
                        echo "</tr>";
                    }                    
                }
                else // O BANCO DE DADOS ESTÁ VAZIO
                {
                    ?>
                    </table>

                        <div class="aviso">
                            <h4>Ainda não há pessoas cadastradas !</h4>
                        </div>
                    <?php
                }
            ?>
        </table>
    </section>
</body>
</html>

<?php
    if (isset($_GET['id'])) {
        $id_pessoa = addslashes($_GET['id']);
        $p->excluirPessoa($id_pessoa);
        header("location: index.php");//atualiza a página após o clique
    }
?>


Arquivo 3: estilo.css

*{
    padding: 0px;
    margin: 0px;
    font-family: arial;
}

label, input{
    display: block;
    line-height: 30px;
    height: 30px;
    outline: none;
    font-size: 13pt;
    width: 100%;
}

form{
    width: 330px;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 20px;
    margin: 30px auto; /*automático dos lados*/
}

input[type="submit"]{
    margin-top: 10px;
    cursor: pointer;
}

#esquerda{
    width: 35% ;
    height: 500px;
    float: left;
}

h2{
    text-align: center;
}

#direita{
    margin-top: 30px;
    width: 65%;
    height: 500px;
    float: left;

}

table {
    background-color: rgba(0, 0, 0, 0.2);
    width: 90%;
    margin: auto;
}

tr{
    line-height: 30px;
}

tr#titulo{
    font-weight: bold;
    background-color: rgba(0,0,0, .6);
    color: white;
}

td{
    padding: 0px 5px;
}

a{
    background-color: white;
    color: black;
    padding: 5px;
    margin: 0px 5px;
    float: left;
}

.aviso {
   
    width: 90%;
    height: 50px;
    margin: 30px auto 0px auto; /* margin no auto */
}
img {
    width: 50px;
    display: block;
    float: left; /*flutuar à esquerda*/
}
h4{
    float: left;
    line-height: 50px;
}


Créditos para: Mirian TechCod


04/04/2023

Bolas de ping pong em CSS

Saída gerada























<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        background: white;
    }    
    .container{
        width: 200px;
        height: 60px;
        margin: auto;
        margin-top: 40%;
        margin-left: 50%;
        transform: translate(-50%, -50%);
    }
    .ball{
        width: 20px;
        height: 20px;
        position: absolute;
        border-radius: 50%;
        left: 15%;
        animation: ball .5s alternate infinite ease;
    }
    @keyframes ball {
        0%{
            top: 60px;
            height: 5px;
            border-radius: 50px 50px 25px 25px;
            transform: scaleX(1.7);
            background-color: #FF3EA5FF;
        }
        40%{
            height: 20px;
            border-radius: 50%;
            transform: scaleX(1);
            background-color: #EDFF00FF;
        }
        100%{
            top: 0%;
            background-color: #00A4CCFF;
        }
    }
    .ball:nth-child(2){
        left: 45%;
        animation-delay: .2s;
    }
    .ball:nth-child(3){
        left: auto;
        right: 15%;
        animation-delay: .3s;
    }
    .shadow{
        width: 20px;
        height: 4px;
        border-radius: 50%;
        background-color: #ffffff59;
        position: absolute;
        top: 62px;
        z-index: -1;
        left: 15%;
        filter: blur(1px);
        animation: shadow .5s alternate infinite ease;
    }
    @keyframes shadow {
        0%{
            transform: scaleX(1.5);
            background-color: #ff3ea56b;
        }
        40%{
            transform: scaleX(1);
            opacity: .7;
            background-color: #edff0066;
        }
        100%{
            transform: scaleX(.2);
            opacity: .4;
            background-color: #edff0066;
        }
    }
    .shadow:nth-child(4){
        left: 45%;
        animation-delay: .2s;
    }
    .shadow:nth-child(5){
        left: auto;
        right: 15%;
        animation-delay: .3s;
    }
</style>
<body>
    <div class="container">
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="shadow"></div>
        <div class="shadow"></div>
        <div class="shadow"></div>
    </div>
</body>
</html>

03/04/2023

Box shadow 3D in CSS

Saída gerada



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Rotating</title>
    <meta http-equiv="refresh" content="7">
</head>
<style>
    body{
        font-family: sans-serif;
        background: #d3eaff;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 91vh;
    }
    .container{
        perspective: 3000px;
    }
    .box{
        display: block;
        width: 250px;
        height: 250px;
        margin: 70px auto;
        transform-style: preserve-3d;
        transition: tarnsform 350ms;
        animation: spin 10s infinite linear;
    }
    @keyframes spin {
        0%{
            transform: rotateY(0deg) translateZ(-120px);
        }
        100%{
            transform: rotateY(360deg) translateZ(-120px);
        }
    }
    .item, .shadow {
        display: block;
        width: 250px;
        height: 250px;
        position: absolute;
    }
    .item{
        display: flex;
        text-align: center;
        justify-content: center;
        font-size: 32px;
        background: radial-gradient(#fff8, #0000);
        border-radius: 1% ;
    }
    .item:nth-child(1){
        transform: rotateY(90deg) translate3d(-125px, 0, 125px);
        background: #ff1800;
    }
    .item:nth-child(2){
        transform: translate3d(0, 0, 250px);
        background: #ffab00;
    }
    .item:nth-child(3){
        transform: rotateY(270deg) translate3d(125px, 0, 125px);
        background: #ff1800;
    }
    .item:nth-child(4){
        transform: rotateY(180deg) translate3d(0, 0, 0);
        background: #00d419;
    }
       
    .shadow{
        background: #999;
        box-shadow: 0 0 20px #0003;
        transform: rotateX(90deg) translate3d(0, 125px, -220px);
        filter: blur(10px);
        animation: none;
    }
   
</style>
<body>
    <div class="container">
        <div class="box">
            <div class="item">01</div>
            <div class="item">02</div>
            <div class="item">03</div>
            <div class="item">04</div>
            <div class="shadow"></div>
        </div>
    </div>
</body>
</html>

31/03/2023

CSS Loading effect

Saída gerada



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        background-color: white;
    }
    .loader-box{
        position: absolute;
        top: calc(50% - 25px);
        left: calc(50% - 25px);
    }
    .loader-box, .loader-box::before, .loader-box::before{
        position: absolute;
        border: 3px solid transparent;
        border-top: 3px solid red;
        border-radius: 50%;
        animation: rotate linear infinite;
        content: '';
    }
    .loader-box{
        height: 100px;
        width: 100px;
        animation-duration: 1.05s;
    }
    .loader-box::before{
        height: 75px;
        width: 75px;
        top: 10px;
        left: 10px;
        animation-duration: 10s;
    }
    .loader-box:after{
        height: 50px;
        width: 50px;
        top: 22px;
        animation-duration: 4s;
    }
    @keyframes rotate {
        from{
            transform: translateZ(360deg);
        }
        to{
            transform: rotateZ(360deg);
        }
    }
</style>
<body>
    <div class="loader-box"></div>
</body>
</html>