Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

**PHP OO com Google Charts**

Fala Galera blz!?

Estou tentando desenvolver uma pagina com gráficos do Google que busca as informações no banco de dados , também aproveitando para pratica Orientação a Objetos .

Fiz algumas pesquisas e encontrei esse post https://rubsphp.blogspot.com/2013/05/gerar-graficos-em-php-com-o-google-charts.html

Que por sinal bem escrito e explicado, testei os códigos do mesmo e 'Ok' tudo funcionando certinho como no Blog

A minha duvida seria como eu faço para desenvolver o mesmo resultado usando OO ?

Fiz alguns teste e o mais próximo que cheguei foi com os seguintes códigos abaixo

index.php

Aqui ao invés de passar uma URL para função ajax eu passei um metodo static que faz a conexão e trata os valores para json

<?php require_once 'global.php' ?>

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>Exemplo de gráfico</title>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


    <script type="text/javascript">
      google.load('visualization', '1.0', {'packages':['corechart']});

      google.setOnLoadCallback(desenhar);


        function desenhar(){
        var json_text =  $.ajax({url: "'.<?php Alarme::buscar() ?>.'", dataType:"json", async: false}).responseText;
;

        var json = eval("(" + json_text + ")");

        var dados = new google.visualization.DataTable(json.dados);

        var chart = new google.visualization.BarChart(document.getElementById('area_grafico'));
        chart.draw(dados, json.config);
      }

    </script>
  </head>

  <body>
    <div id="area_grafico"></div>
  </body>
</html>

Alarme.php

<?php 

class Alarme {



    public static function buscar()
    {
        $grafico = array(
            'dados' => array(
                'cols' => array(
                    array('type' => 'string', 'label' => 'CIDADE'),
                    array('type' => 'number', 'label' => 'Qtd')
                ),  
                'rows' => array()
            ),
            'config' => array(
                'title' => 'Cidades',
                'width' => 400,
                'height' => 300
            )
        );


        $query = "select CIDADE,count(CIDADE) as Qtd from alarmes group by CIDADE having count(CIDADE) >= 2 order by count(CIDADE) desc";
        $conexao = Conexao::pegarConexao();
        $stmt = $conexao->query($query);
        while ($obj = $stmt->fetchObject()) {
            $grafico['dados']['rows'][] = array('c' => array(
            array('v' => $obj->CIDADE),
            array('v' => (int)$obj->Qtd)
            ));
        }

          header('Content-Type: application/json; charset=UTF-8');
            echo json_encode($grafico);
    }
}

Quando eu fui testar a pagina retornou esse html


    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>Exemplo de gráfico</title>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


    <script type="text/javascript">
      google.load('visualization', '1.0', {'packages':['corechart']});

      google.setOnLoadCallback(desenhar);


        function desenhar(){
        var json_text =  $.ajax({url:

 "'.{"dados":{"cols":[{"type":"string","label":"CIDADE"},{"type":"number","label":"Qtd"}],"rows":[{"c":[{"v":"SAO PAULO"},{"v":3}]},{"c":[{"v":"SAO JOSE DO RIO PRETO"},{"v":2}]},{"c":[{"v":"SANTOS"},{"v":2}]}]},"config":{"title":"Cidades",

"width":400,"height":300}}.'", dataType:"json", async: false}).responseText;
;

        var json = eval("(" + json_text + ")");

        var dados = new google.visualization.DataTable(json.dados);

        var chart = new google.visualization.BarChart(document.getElementById('area_grafico'));
        chart.draw(dados, json.config);
      }

    </script>
  </head>

  <body>
    <div id="area_grafico"></div>
  </body>
</html>
Pasta projeto
    pasta classes
        Alarme.php
        config.php
        Conexao.php
        Erro.php
global.php
index.php

Bom antes de mais nada queria dizer que estou aprendendo e praticando tanto o php, jquery/ajax, html ....

E pelo que eu entedi a função $ajax precisa do caminho até o arquivo com o método que faz a conexão e o select

Eu acredito que essa ideia de usar um metodo static não funciona ou não foi feito do jeito certo

Duvidas: Como eu faço para passar um caminho que execute esse metodo buscar()?

A ideia que tive de usar o metodo static faz algum sentido?

Bom desde ja agradeço a toda comunidade e a equipe da alura .

Abs

2 respostas
solução!

Oi Felipe, vou colocar a minha opinião sobre o assunto, espero que outras pessoas também possam ajudar na discussão.

Eu não gosto de misturar php com javascript então para pegar os dados necessário do gráfico faria uma requisição para um endpoint que retornaria os dados como você faz na classe Alarme.

Eu também deixaria os comandos do banco de dados em uma camada separada, você pode criar uma classe tipo CidadeDao que seria responsável pelos comandos sql referente as cidades, dessa forma você pode reutilizar a query em outras partes do sistema.

Em relação ao método estático, eu uso mais para atributos de configurações, não gosto muito de usar em métodos de classes.

O paradigma orientado a objetos não é fácil, aqui na alura tem vários cursos que te ajudam a melhorar nesse ponto como o solid, design patterns e testes TDD, tente sempre focar na reutilização do código, construir abstrações e separar responsabilidades em classes distintas.

Espero ter ajudado.

Eae Alex, muito obrigado por expor a sua opinião.

Já é de grande ajuda, agora já tenho um ponto de partida pra estudar e aprender hahaha

Realmente o paradigma orientado a objetos é meio confuso pelo menos para mim quando eu acho que to entendo surge aquele ponto de interrogação na mente rsrsrs

Eu inicie o modulo design patterns essa semana e comprei um livro na casa do código sobre OO e o desafio é "dichavar" esse paradigma do capiroto hahahahha

Mais uma vez Obrigado pela atenção pode ter certeza que ajudo muito

assim que consegui por em pratica suas opiniões eu aviso

Abs

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software