Jump to content
  • 0
Jack Oliveira

Como pegar Dados da tabela para pagina que esta em html com javascript {{ title }}

Question

 

 

Ola pessoal boa tarde preciso de um favor de vocês se assim for possível!!

 

Seguinte  tenho uma página que ela esta em apenas em HTML porem preciso pegar umas informações do banco de dados e não sabendo como trazer os

dados das tabelas para esta página canais.html, talvez sej ate simples em fazer isso. Mais eu não estou sabendo de como trazer estas informações ai

 

OBS: esta página de html precisa manter da forma que esta o codigo ai apenas usar uma forma de usar as informações nela 

bom espero que tenha entendo o que preciso aqui...

 

segue o código 

 

Pagina canais.html

<!DOCTYPE html>
<html lang="pt-BR">
	<head>
		<meta charset="UTF-8">
		<meta name="language" content="pt-BR">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="icon" href="{{ favicon }}">
      
 		{{ google_analytics }}
      
<title>{{ title }}</title>

<link rel="canonical" href="{{ url }}">

<meta name="description" content="{{ description }}">

<meta property="og:site_name" content="{{ site_name }}">
<meta property="og:title" content="{{ title }}">
<meta property="og:type" content="Website">
<meta property="og:url" content="{{ url }}">
<meta property="og:description" content="{{ description }}">
<meta property="og:image" content="{{ image }}">

<meta name="twitter:title" content="{{ title }}">
<meta name="twitter:url" content="{{ url }}">
<meta name="twitter:description" content="{{ description }}">
<meta name="twitter:site" content="{{ app_url }}">
<meta name="twitter:image" content="{{ image }}">

<meta itemprop="title" content="{{ title }}">
<meta itemprop="name" content="{{ name }}">
<meta itemprop="url" content="{{ url }}">
<meta itemprop="description" content="{{ description }}">
<meta itemprop="image" content="{{ image }}">

<meta property="fb:app_id" content="{{ fb_app_id }}">
<meta name="og:image:width" content="590">
<meta name="og:image:height" content="auto"> 
      
<link rel="stylesheet" href="{{ url }}assets/css/app_style.css"> 
<link rel="stylesheet" href="{{ url }}assets/style.css">  
      
      <!-- Pensei em chamar atraves de um script   -->
<script type="application/javascript" src="{{ url }}assets/js/script.js"></script> 
      
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>      
	<style>
		#container-wrapper-1 {background-size:cover;background-position:left top;background-image : url('images/{{ bg2 }}?v=1gr61cu');}
		#container-wrapper-2 {background-size:cover;background-position:left top;background-image : url('images/{{ bg3 }}?v=1gr61cu');}
		#container-wrapper-3 {background-size:cover;background-position:center top;background-image : url('images/{{ bg4 }}?v=1gr673m');}
		div#preloader { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; overflow: visible; background: white no-repeat center center; }
		
		
		
.btn-800 {
    background-color: {{ background_color1 }};
    border-color: {{ border_color1 }};
  color: {{ color1 }};
 font-size:25px!important;
 margin: 10px;
  }
  .btn-800:hover {
    color: {{ color2 }};
    background-color: {{ background_color2 }};
    border-color: {{ border_color2 }};
    margin: 10px;
	}

.solucion {
  background-color: {{ background_color }};
  border-color: {{ border_color }};
  color: {{ color }};
width: 236px; 
 font-size:25px!important;
margin: 10px;
display: block;
text-align: center;
  }
  
  .solucion:hover {
    color: #fff;
    background-color: {{ background_color }};
    border-color: {{ border_color }};
    
width: 236px; 
margin: 10px; 
display: block; 
text-align: center; 
	}	
	</style>      
      
      
 	</head>

	<body> 
<div class="card">
    <div class="card-header white">
      <strong> {{ titulo_informacao }} </strong>
      <p> {{ resumo }} </p>
    </div>
  
	<p style="text-align: center; line-height: 2.05;">
      <span style="font-size: 20px;">{{ canais }}</span>
  </p>
	<p style="text-align: center; line-height: 2.05;">
      <strong>
        <span style="font-size: 30px;">{{ play }}</span>
      </strong>
  </p>  
</div>
      
  </body>
  
</html>

Então seria isso ai, 

só mais uma obs: toda vez que ser inserido ou atualizado os dados no banco que as informações seja atualizada tbm...

 

 

Desde de já fico no aguardo

 

Share this post


Link to post
Share on other sites

9 answers to this question

Recommended Posts

  • 0

Qual a linguagem back-end? Essa informação é vital.

 

De qualquer forma a duas alternativas.

1 (A mais correta e sensata) Renderizar a página e entregar para o usuário tudo completo, acredito que conseguiria fazer algo para isso usando um arquivo .html e alimentando os dados através do PHP.

2 (O menos eficiente) Pré renderizar a página, pós seu carregamento redefinir todos os valores através do javascript. O problema disso é justamente você ter que renderizar um padrão e substituir tudo depois de carregado. É até simples demais porém ineficiente tanto em usabilidade quanto em desempenho.

 

 

Em 27/12/2021 at 15:25, Jack Oliveira disse:

só mais uma obs: toda vez que ser inserido ou atualizado os dados no banco que as informações seja atualizada tbm

Aí você re-executa a coisa toda usando websocket

 

Share this post


Link to post
Share on other sites
  • 0
9 horas atrás, Omar~ disse:

Qual a linguagem back-end? Essa informação é vital.

 

De qualquer forma a duas alternativas.

1 (A mais correta e sensata) Renderizar a página e entregar para o usuário tudo completo, acredito que conseguiria fazer algo para isso usando um arquivo .html e alimentando os dados através do PHP.

2 (O menos eficiente) Pré renderizar a página, pós seu carregamento redefinir todos os valores através do javascript. O problema disso é justamente você ter que renderizar um padrão e substituir tudo depois de carregado. É até simples demais porém ineficiente tanto em usabilidade quanto em desempenho.

 

 

Aí você re-executa a coisa toda usando websocket

 

Ola @Omar~ ela sera mostrada no FRONT

Share this post


Link to post
Share on other sites
  • 0

Bom, eu presumo que a linguagem back-end seja o PHP.

 

Começando eu resumir o html só para alguns campos, mas já dar para ver como a coisa vai funcionar.

Então o arquivo.html:

Spoiler

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="UTF-8">
        <meta name="language" content="pt-BR">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="icon" href="{{ favicon }}">

        <title>{{ title }}</title>

        <meta name="description" content="{{ description }}">
        <link rel="stylesheet" href="{{ url }}assets/css/app_style.css">

        <script type="application/javascript" src="{{ url }}assets/js/script.js"></script> 
        <script>
            {{ google_analytics }}
        </script>
        <style>
            .card {
                background-color: {{ background_color1 }};
                color: {{ color1 }}
            }
        </style>
    </head>

    <body> 
        <div class="card">
            <!--
                A TAG <strong> foi removida no HTML 5
                Os navegadores ainda a reproduzem porque ainda existem
                centenas de milhares de páginas que não são html 5
                Mas será removida em um futuro breve.
            -->
            <span style="font-weight:bold"> {{ titulo_informacao }} </span>
            <p> {{ resumo }} </p>
        </div> 
    </body>
</html>

 

 

Então criei uma classe que irá pegar onde tem no html {{ alguma_coisa }} e substituir por dados vindos de um arrray no php:

Spoiler

<?php

/* Essa classe fixa o buffer do cabeçalho
 * Isso impedirá que o cabeçalho http seja entregue após executar os métodos daqui */

class RendeHtml {

    private $htmlBase;
    private $encontrarChave;
    private $substituirChave;
    private $htmlRenderizado;

    public function defineDados($arquivoHtml, $arrayDados = []) {
        $this->htmlBase = (string) $arquivoHtml;
        $this->existeHtml();
        $this->encontrarChave = [];
        $this->substituirChave = [];
        foreach ($arrayDados as $chave => $valor) {
            $this->encontrarChave[] = '{{ ' . $chave . ' }}';
            $this->substituirChave[] = $valor;
        }
        $this->substituirDados();
    }

    public function verHtml() {
        return (empty($this->htmlRenderizado) ? 'Não renderizado html de saída' : $this->htmlRenderizado);
    }

    private function existeHtml() {
        if (!file_exists($this->htmlBase)) {
            die('Erro ao encontrar arquivo html para gerar renderização');
        }
    }

    private function substituirDados() {
        ob_start();
        include($this->htmlBase);
        $fixarCabecalho = ob_get_clean();
        if (!empty($this->encontrarChave) && !empty($this->substituirChave)) {
            $this->htmlRenderizado = str_replace($this->encontrarChave, $this->substituirChave, $fixarCabecalho);
        }
    }

}

 

 

Daí então é só criar um array onde os índices terá o mesmo nome contido no que tem no html entre as chaves {{}}, os valores que serão inseridos nada mais que os valores dos índices com o mesmo nome.

Spoiler

<?php
require_once (__DIR__ . DIRECTORY_SEPARATOR . 'RendeHtml.php');

$vai_no_html = [ // Quais os dados vão ser adicionados ao html
    'favicon' => 'icone.ico',
    'title' => 'título da página',
    'description' => 'Descrição qualquer',
    'url' => 'https://endereco.com/',
    'google_analytics' => 'console.log(\'Um script javascript\')',
    'background_color1' => '#ff0000',
    'color1' => '#ffffff',
    'titulo_informacao' => 'Informação de título',
    'resumo' => 'Resumo qualquer'
];
$html = __DIR__ . DIRECTORY_SEPARATOR . 'arquivo.html'; // Endereço para o arquivo html

$renderizar = new RendeHtml();
$renderizar->defineDados($html, $vai_no_html);

echo ($renderizar->verHtml());

 

 

Share this post


Link to post
Share on other sites
  • 0
2 horas atrás, Omar~ disse:

Bom, eu presumo que a linguagem back-end seja o PHP.

Sim tudo em php  apenas esta pagina que sera so html

Share this post


Link to post
Share on other sites
  • 0

Ola @Omar~ fiz aqui para ver o resultado e não mostrou não as informações

 

Ou eu estou fazer da forma incorreta..

 

Os arquivos esta assim desta forma aqui

Admin/includes/RendeHtml.php   Aqui não mudei nada esta da mesma forma que tu apresentou ai..

<?php

/* Essa classe fixa o buffer do cabeçalho
 * Isso impedirá que o cabeçalho http seja entregue após executar os métodos daqui */

class RendeHtml {

    private $htmlBase;
    private $encontrarChave;
    private $substituirChave;
    private $htmlRenderizado;

    public function defineDados($arquivoHtml, $arrayDados = []) {
        $this->htmlBase = (string) $arquivoHtml;
        $this->existeHtml();
        $this->encontrarChave = [];
        $this->substituirChave = [];
        foreach ($arrayDados as $chave => $valor) {
            $this->encontrarChave[] = '{{ ' . $chave . ' }}';
            $this->substituirChave[] = $valor;
        }
        $this->substituirDados();
    }

    public function verHtml() {
        return (empty($this->htmlRenderizado) ? 'Não renderizado html de saída' : $this->htmlRenderizado);
    }

    private function existeHtml() {
        if (!file_exists($this->htmlBase)) {
            die('Erro ao encontrar arquivo html para gerar renderização');
        }
    }

    private function substituirDados() {
        ob_start();
        include($this->htmlBase);
        $fixarCabecalho = ob_get_clean();
        if (!empty($this->encontrarChave) && !empty($this->substituirChave)) {
            $this->htmlRenderizado = str_replace($this->encontrarChave, $this->substituirChave, $fixarCabecalho);
        }
    }

}
?>

Ja aqui neste outro arquivo

Admin/rendehtml.php   Aqui apenas deixei titulo e url para fazer o teste na pagina html

<?php
    require_once ('database/config.php');
	require_once ('database/config.painel.php');
	require_once ('database/config.database..php');
	require_once ('database/config.session.php');
	require_once ('includes/funcoes.php');
	require_once ('includes/RendeHtml.php');

	$sid = new Session;
	$sid->start();
	
	if (!$sid->check()){
		Redireciona('login.php');
	}



//require_once (__DIR__ . DIRECTORY_SEPARATOR . 'RendeHtml.php');

$vai_no_html = [ // Quais os dados vão ser adicionados ao html
    'titulo' => ConfigPainel('site_nome'),
    'url' => ConfigPainel('site_url')
];
$html = __DIR__ . DIRECTORY_SEPARATOR . '../canais.html'; // Endereço para o arquivo html

$renderizar = new RendeHtml();
$renderizar->defineDados($html, $vai_no_html);

echo ($renderizar->verHtml());

?>

na pagina html apenas isso aqui conforma tu mostra na pagina html tbm

 

<title>{{ titulo }}</title>

 

Ou estou fazendo errado aqui?

Share this post


Link to post
Share on other sites
  • 0

Aparentemente deveria tudo funcionar como tal, tentei reproduzir o problema e a única coisa de anormal é se algum índice do array estiver vazio.

Depure os valores do array para ver:

Citar

$vai_no_html = [ // Quais os dados vão ser adicionados ao html
    'titulo' => ConfigPainel('site_nome'),
    'url' => ConfigPainel('site_url')
];
var_dump($vai_no_html);

E veja se os índices possuem algum valor.

De qualquer forma tente não usar a função ConfigPainel e escreva qualquer coisa aí para testar

Estou disponibilizando o link para do teste que fiz para você testar aí.

https://drive.google.com/file/d/1PSd5Nr2RYh8LKleIYnQgkymppf1lctcC/view?usp=sharing

 

 

Share this post


Link to post
Share on other sites
  • 0

Estranho deve ser alguma configuração do apache que desconheço.

Tente então modificar a arquitetura e não usar um arquivo html e sim php. De fato fica até mais simples e prático.

 

<?php
$dados = [
    'titlo' => 'titulo da página',
    'texto' => 'um texto de teste'
];
$html = include ('estrutura.php');
echo $html;

Aí nesse estrutura.php é que você transcreve a página

<?php
$renderiza = '<!DOCTYPE html>'
. '<html lang="pt-BR">'
    . '<head>'
        . '<meta charset="UTF-8">'
        . '<title>' . $dados['titlo'] . '</title>'
    . '</head>'
    . '<body>'
        . '<p>' . $dados['texto'] . '</p>'
    . '</body>'
. '</html>';
return ($renderiza);

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By vmenezes
      ola galera . tenho uma aplicação com asp  e utilizo javascript para bater foto do cliente . consigo apos a foto batida salvar no pc com o ID do cliente,
      porem gostaria que assim que a foto fosse batida salvasse na raiz do proprio site.
      tem como fazer isso ?
      obg
    • By marco_fcp
      Estou tentando criar este código para quando escolher uma option no select, ele pegar nesse valor, e somar com quantos checksbox o utilizador quiser. Aí, no fim, no campo do valortotal conforme a option que escolher, irá subtrair um desconto do valor total. Penso ter feito os scripts, mas não estou a conseguir o resultado final com o desconto, dinâmico no mesmo campo.
      <!-- Pedido de Orçamento --> <div class="container-fluid mb-5"> <div class="row"> <div class="col-lg-2"></div> <div class="col-lg-8 mb-5"> <div class="caixa-orcamento pb-5"> <form action="" method="POST" onchange="atualizarPreco()" name="formulario"> <h3 class="text-center pt-5 pb-4 labels">Pedido de Orçamento:</h3> <table class="m-auto"> <tr> <td class="fw-bold labels">Tipo de página web:</td> <td> <!-- Três tipos de pãgina Fictícia com os valores de 400, 500 e 600 respetivamente --> <select name="tipopagina" id="tipopagina" required> <option value="0"></option> <option value="400" id="estatica">Estática</option> <option value="500" id="dinamica" >Dinâmica</option> <option value="600" id="loja" >Loja</option> </select> </td> </tr> <tr> <!-- Descontos de Prazo - de 1 Mes- 5%, 2 Meses-10%, 3 Meses- 15$, 4 Meses- 20%, em diante sempre 20% --> <td class="fw-bold labels">Prazo em meses:</td> <td><input type="number" id="prazo"></td> </tr> </table> <h5 class="text-center pt-5 pb-4 labels">Marque os separadores desejados</h5> <!-- Cada check selecionado soma 400 ao valor total --> <div class="checkbox labels text-center mb-5"> <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Quem Somos <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Onde estamos <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Galeria de fotografias <br> <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">eCommerce <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Gestão Interna <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Notícias <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Redes Sociais </div> <h5 class="text-center labels">Orçamento estimado:</h5> <p class="text-center labels">(É um valor meramente indicativo, pode sofrer alterações)</p> <div class="resultado-orcamento text-center"> <!-- Valor total do orçamento com os botões de resetar e submeter o orçamento --> <input type="text" id="valor-orcamento" name="valor-orcamento" value=""> <br> <button type="reset" class="btn btn-primary mt-4" id="reset" name="reset">Apagar Orçamento</button> <button type="submit" class="btn btn-primary mt-4" id="submeter" name="submeter">Submeter Orçamento</button> </div> </form> </div> </div> <div class="col-lg-2"></div> </div> </div> function atualizarPreco() { var preco = 0; // Tipo de página Selecionada com preços Diferentes if (document.getElementById('tipopagina').value == '400') { preco = 400; } if (document.getElementById('tipopagina').value == '500') { preco = 500; } if (document.getElementById('tipopagina').value == '600') { preco = 600; } // Desconto de 5% por cada mês de prazo (sobre valor total do orçamento) (máximo 20% de desconto que equivale a 4 meses máximo. A partir daí é sempre 20%) var prazo = document.getElementById('prazo').value; if (prazo == 0) { preco = preco + 0; } else if (prazo == 1) { preco = preco - (preco * 0.05); } else if (prazo == 2) { preco = preco - (preco * 0.10); } else if (prazo == 3) { preco = preco - (preco * 0.15); } else { preco = preco - (preco * 0.20); } document.getElementById('valor-orcamento').value = preco; // Código que soma 400€ ao total por cada checkbox selecionado var soma1 = 0; function somar(check) { if ( check.checked ){ soma1 += 1*check.value; } else { soma1 -= 1*check.value; } document.getElementById("valor-orcamento").value = soma1; } }  
    • By luiz monteiro
      Olá, tudo bem?
       
      Estou tentando colocar um evento dropdown em um template.js mas sem sucesso.
       
      O script é o seguinte
       
      const template = `
      <nav id="sidebar">

          <ul class="list-unstyled menu">
              <li>
                  <a href="#">
                      <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
                      Home
                  </a>
              </li>
              <li>
                  <a href="#">
                      <span class="glyphicon glyphicon-signal" aria-hidden="true"></span>
                      Analytics
                  </a>
              </li>
              <li>
              <a href="#">
                  <span class="glyphicon glyphicon-tasks" aria-hidden="true"></span>
                  Ações
              </a>
              </li>
              <li>
                  <a href="#">
                      <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
                      Controles
                  </a>
              </li>
              <li>
                  <a href="#">
                      <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                      Configurações
                  </a>
              </li>
          </ul>

          </nav>
      `
      export default {
        name: "Sidebar", 
        template,
        delimiters: ["#{", "}#"]
      }
       
       
       
       
      ============Preciso colocar um dropdown na opção Ações, algo assim
       
                      <li
                          v-for="item in items">
                          <a :href="item.url"
                             v-if="!item.children">
                              
                          </a>
                          <span
                              v-else
                              v-on:mouseover="mouseover"
                              v-on:mouseleave="mouseleave">
                              {{ item.name }}
                              
                              <ul class=" dropdown"
                                 :class="{ isOpen }">
                                  <li
                                      v-for="child in item.children">
                                      <a :href="child.url">
                                          {{ child.name }}
                                      </a>
                                  </li>
                              </ul>
                          </span>
                      </li>
       
      var nav = new Vue({
          el: '#nav',
          data: {
              isOpen: false,
              items: [
                  {
                      url: '#acoes',
                      name: 'Ações',
                      children: [
                          {
                              url: '#link1',
                              name: 'Opção 1'
                          },
                          {
                              url: '#link2',
                              name: 'Opção 2'
                          },
                          {
                              url: '#link3',
                              name: 'Opção 3'
                          },
                      ]
                  }
              ]
          },
          methods: {
              mouseover: function () {
                  this.isOpen = true;
              },
              mouseleave: function () {
                  this.isOpen = false;
              }
          }
      });
       
       
       
      Quando coloco a programação no sidebar.js, não é exibido nada na tela nem mesmo retorna erro.
       
       
      =============No index os imports estão assim
       
          <script type="importmap">
            {
              "imports": {
                "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
              }
            }
          </script>
          <script type="module">
            import { createApp } from "vue";
            import Sidebar from "/components/sidebar.js";
            import Welcome from "/components/welcome.js";
            const app = createApp({
                delimiters: ["#{", "}#"],
                components: {
                  Welcome,
                  Sidebar
                },
                data() {
                  return {}
                },
                methods: {
                
                }
              }).mount("#wrapper");
          </script>
        </body>
       
      Agradeço desde já.
       
       
       
    • By nathanmoreira
      Após diversos cálculos provindos de um código, recebo um número inteiro ao qual não sei o tamanho ao certo (pode variar de 1 pra frente). Quero passar esse número para string e formatar ele de maneira a colocar um ,00 no final e, a cada 3 números antes da virgula, um ponto. Ou seja, deixar o número num formato como: 45.114.477,00
       
      Como fazer? 
    • By kernmatheus
      Boa noite,
       
      Galera, utilizo uma aplicação que me permite inserir arquivos JavaScript customizados em algumas páginas, e por vezes quando realizo alguma alteração considerável no JS, preciso solicitar aos usuários da ferramenta para limparem o cache, evitando que eles fiquem com as regras antigas do JS e gere algum erro.
       
      Existe alguma forma de esporadicamente quando eu realizar alterações no JS, forçar a limpeza de cache nas máquinas clientes? Ou então de não permitir que o navegador salve cache deste JS que eu customizo as regras?
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.