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

Jack Oliveira · Dezembro 27, 2021

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

Omar~ · Dezembro 29, 2021

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

Jack Oliveira · Dezembro 29, 2021

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

Omar~ · Dezembro 29, 2021

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());

Jack Oliveira · Dezembro 29, 2021

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

Jack Oliveira · Dezembro 29, 2021

Obrigado pela ajuda fico grato..

Jack Oliveira · Dezembro 31, 2021

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?

Omar~ · Dezembro 31, 2021

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

Jack Oliveira · Janeiro 1, 2022

Ola @Omar~ FELIZ 2022 pra ti e familia

Mano peguei o que tu mandou no DRIVE e coloquei aqui na hospedagem veja que não mostra

LINK

Omar~ · Janeiro 1, 2022

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);

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

Pergunta

Jack Oliveira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

9 respostas a esta questão

Recommended Posts

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jack Oliveira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jack Oliveira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jack Oliveira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jack Oliveira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jack Oliveira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

PHP+Codeigniter - Adicionar Registro Plano de Contas

Javascript - Passar Parâmetros para uma Função.

PHP - Consulta MySql para prazo de dias

Conteúdo Similar

Fóruns

Tempo Real

Informação importante