Google Planilhas Avançado - #59 Projeto Completo VIII

Nessa vídeoaula vamos ensinar como exibir os dados de uma planilha Google de forma visual através de um arquivo html.

Dados do Google Planilhas no HTML

Para fazer a integração dos dados da planilha a um site externo, utilizaremos a API do Google Planilhas e como linguagem backend o PHP.

Os arquivos utilizados nessa aula são os mesmos da aula em que ensino o uso da API.

index.php

<?php
$client=new Classes\ClassClient();
$sheet=new Classes\ClassSpreadsheet($client->getClient());
$arrVehicles=$sheet->readSheet(
    "ID_DA_PLANILHA",
    "NOME_DA_FOLHA",
    "INTERVALO"
);
?>
<div class="city">
    <?php $sheet->viewCities('DADO_DA_COLUNA_A_DA_TABELA',$arrVehicles); ?>
</div>

Na ClasseSpreadsheet vamos criar o método que exibe os veículos:

ClassSpreadsheet.php

public function viewCities($city,$resultRead)
{
    echo "<div class='cityItem'>";
        echo "<div class='cityItemTitle'> $city </div>";

        foreach ($resultRead as $vehicle){
            if($vehicle[0] == 'Disponível' && $vehicle[1] == $city){
                echo "<div class='cityItemVehicle $verifyVehicle[type]'> $vehicle[3] $vehicle[4] </div>";
            }
        }
    echo "</div>";
}

Posteriormente iremos estilizar os nossos dados editando o style.css.

style.css

.city{display:flex; flex-direction: row; flex-wrap: wrap; text-align: center;}
.cityItem{display:flex; width: 25%; height: 350px; font-weight: bold; flex-direction: row; flex-wrap: wrap;justify-content: center; align-content: flex-start; overflow-y: auto; border: 2px solid #111;}
.cityItemTitle{width: 100%; padding: 10px 5px; margin-bottom: 10px; background: #111; color:#fff; font-weight: bold; font-size: 20px;}
.cityItemVehicle{width: 35%; padding: 15px 0; margin: 8px 10px; background: #333; color: #fff; border-radius: 5px;}

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

Precisando de assessoria premium? webdesignemfoco@gmail.com