Google Planilhas Avançado - #57 Projeto Completo VI

29/03/2020

Na videoaula de hoje criaremos um formulário personalizado com inserção de dados na nossa planilha do Google, será um formulário via API.

Formulário via API - Google Spreadsheet

Nesse formulário vamos simular um cadastro para o usuário da oficina que perdeu a senha do sistema. Caso você não tenha os arquivos iniciais, assista primeiro as vídeoaulas de API clicando aqui.

Na index.php vamos criar o formulário personalizado:

<?php
include ("config/config.php");
?>
<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Formulário Personalizado</title>
    <link rel="stylesheet" href="<?php echo DIRPAGE.'lib/style.css'; ?>">
</head>

<body>
<div class="logomarca">
    <img src="<?php echo DIRPAGE.'img/logomarca.png'; ?>" alt="Logomarca">
</div>

<form id="formPersonalizado" name="formPersonalizado" method="post" action="<?php echo DIRPAGE.'controllers/controllerForm.php' ?>">
    <div class="cadastro">
        <input type="text" name="matricula" id="matricula" placeholder="Matrícula:">
        <input type="text" name="nome" id="nome" placeholder="Nome:">
        <input type="text" name="cpf" id="cpf" placeholder="CPF:">
        <input type="email" name="email" id="email" placeholder="Email:">
        <input type="text" name="teste" id="teste" placeholder="Teste:">
        <select name="problema" id="problema">
            <option value="">Problema:</option>
            <option value="Usuário Revogado">Usuário Revogado</option>
            <option value="Novo Usuário">Novo Usuário</option>
            <option value="Outros">Outros</option>
        </select>
        <select name="cidade" id="cidade">
            <option value="">Cidade:</option>
            <option value="Divinópolis">Divinópolis</option>
            <option value="Itaúna">Itaúna</option>
            <option value="Pará de Minas">Pará de Minas</option>
            <option value="Formiga">Formiga</option>
            <option value="Nova Serrana">Nova Serrana</option>
            <option value="Bom Despacho">Bom Despacho</option>
            <option value="Oliveira">Oliveira</option>
        </select>
        <input type="submit" value="Solicitar">
    </div>
</form>
</body>

</html>

Criaremos também o controllerForm.php:

<?php
include "../config/config.php";
include DIRREQ."lib/vendor/autoload.php";
include DIRREQ."class/ClassClient.php";
include DIRREQ."class/ClassSpreadsheet.php";

$arr=[];
date_default_timezone_set("America/Sao_Paulo");
$arr[0]=date("d/m/Y H:i:s");
foreach ($_POST as $key=>$value){
    array_push($arr,$value);
}

$client=new Classes\ClassClient();
$sheet=new Classes\ClassSpreadsheet($client->getClient());
$sheet->insertSheet(
    "1W4UBduwWg2P_uEVtqjDlOddawteIABbtk3LvePnLPjY",
    "Senhas!A2",
    $arr
);

Para estilizar o formulário vamos criar o arquivo style.css

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

.cadastro{
    display: flex;
    width: 80%;
    margin: 10px 10%;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.cadastro input[type='text'],
.cadastro input[type='email'],
.cadastro select{
    width: 40%;
    height: 40px;
    margin: 10px 0;
    padding: 0 10px;
    font-size: 18px;
}

.cadastro input[type='submit']{
    width: 20%;
    margin: 0 40%;
    height: 40px;
    background: #333;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.logomarca{
    display: flex;
    width: 100%;
    margin: 15px 0;
    justify-content: center;
}

Lembre-se de colocar sua planilha pública na web permitindo a edição. Para isso, clique no botão compartilhar.

Por hoje é só! Sucesso nos códigos e na vida!

Quer fazer um formulário personalizado? Suporte premium: webdesignemfoco@gmail.com

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Google Planilhas Avançado - #56 Projeto Completo V

Continuando nosso projeto completo com Google Planilhas, nessa videoaula trataremos do uso da tabela dinâmicas para uso dos dados.

Google Planilhas Avançado - #58 Projeto Completo VII

No tutorial de hoje aprenderemos como fazer uma auditoria dos dados preenchidos na planilha de controle de frota.

Google Planilhas

Neste curso abordaremos a fundo as funcionalidades do Google Planilha. Adentraremos no Google App Script e na API do Google Sheet. Aproveite.