Classe Crud com PDO e MYSQLi - #4

No vídeo de hoje vamos criar toda a parte de estilização do nosso layout da página de cadastro e vamos receber nossas variáveis. Além disso, vamos trabalhar com a biblioteca Zepto.js para implementarmos o Ajax.

Chamando a biblioteca Zepto.js

Como trabalharemos com um projeto simples, sem plugins ou grandes alterações no DOM, vamos utilizar a biblioteca Zepto.js. Para baixá-la clique aqui.

A biblioteca Zepto, apesar de menos robusta, é bem mais leve que a JQuery e utiliza uma codificação muito parecida. Ela é ideal para pequenos projetos. Vamos salvar a zepto.min.js dentro da pasta Includes e vamos criar o arquivo Javascript.js que será responsável por abrigar as funções ajax.

Linkaremos assim:

<script src="./Includes/zepto.min.js"></script>
<script src="Javascript.min.js"></script>

Criando o Layout

Vamos criar a pagina cadastro.php e implementar a seguinte estrutura nela:

<div class="Content">
    <div class="Resultado"></div>

    <div class="Formulario">
        <h1 class="Center">Cadastro</h1>

        <form name="FormCadastro" id="FormCadastro" method="post" action="Controllers/ControllerCadastro.php">
            <div class="FormularioInput">
                Nome: <br>
                <input type="text" id="Nome" name="Nome">
            </div>

            <div class="FormularioInput">
                Sexo: <br>
                <select name="Sexo" id="Sexo">
                    <option value="">Selecione</option>
                    <option value="Masculino">Masculino</option>
                    <option value="Feminino">Feminino</option>
                </select>
            </div>

            <div class="FormularioInput">
                Cidade: <br>
                <input type="text" id="Cidade" name="Cidade">
            </div>
        
            <div class="FormularioInput FormularioInput100 Center">
                <input type="submit" value="Cadastrar">
            </div>
        </form>
    </div>
</div>

Estilizaremos o layout assim:

.Center{text-align: center;}

.Content{float:left; width: 100%; padding: 15px;}

.Resultado{display: none; float:left; width: 70%; border: 2px solid #00ff0d; background: #d8ffd5; text-align:center; padding: 15px; margin: 20px 15% 10px 15%;}

.Formulario{float:left; width: 70%; height: 300px; margin: 20px 15%;}
    .FormularioInput{float:left; width: 50%; padding: 0 5%;}
    .FormularioInput100{width: 100% !important;}
    .FormularioInput input[type='text'] , .FormularioInput select{width: 100%; height: 45px;}
    .FormularioInput input[type='submit']{display:inline-block; padding: 15px 35px; margin: 15px 0; border:0; cursor: pointer; background: #000000; color:#fff; font-weight: bold; text-align: center; border-radius: 10px;}

Recebendo as variáveis e criando o Controller

Como utilizaremos as variáveis em várias páginas, visando reutilizar os códigos, criaremos dentro da pasta Includes o arquivo Variaveis.php com o seguinte código:

if(isset($_POST['Id'])){ $Id=filter_input(INPUT_POST,'Id',FILTER_SANITIZE_SPECIAL_CHARS); }elseif(isset($_GET['Id'])){ $Id=filter_input(INPUT_GET,'Id',FILTER_SANITIZE_SPECIAL_CHARS); }else{ $Id=0; }
if(isset($_POST['Nome'])){ $Nome=filter_input(INPUT_POST,'Nome',FILTER_SANITIZE_SPECIAL_CHARS); }elseif(isset($_GET['Nome'])){ $Nome=filter_input(INPUT_GET,'Nome',FILTER_SANITIZE_SPECIAL_CHARS); }else{ $Nome=""; }
if(isset($_POST['Sexo'])){ $Sexo=filter_input(INPUT_POST,'Sexo',FILTER_SANITIZE_SPECIAL_CHARS); }elseif(isset($_GET['Sexo'])){ $Sexo=filter_input(INPUT_GET,'Sexo',FILTER_SANITIZE_SPECIAL_CHARS); }else{ $Sexo=""; }
if(isset($_POST['Cidade'])){ $Cidade=filter_input(INPUT_POST,'Cidade',FILTER_SANITIZE_SPECIAL_CHARS); }elseif(isset($_GET['Cidade'])){ $Cidade=filter_input(INPUT_GET,'Cidade',FILTER_SANITIZE_SPECIAL_CHARS); }else{ $Cidade=""; }

Nessa aula iniciaremos a criação do nosso ControllerCadastro.php. Para isso, na raiz do projeto criaremos a pasta Controllers e criaremos dentro dela o referido arquivo php.

<?php
include("../Includes/Variaveis.php");

Na próxima aula damos prosseguimento.