HTML Recebendo formulario php em html

Glouk · 20 de julho de 2018

Ola,

Estou com algumas dúvidas. Pois estou criando um site de podcast, onde sempre mostra um relógio cronometrando o tempo que falta para sair o próximo ep (que é um por semana). Na pagina que utilizei, eu tenho que colocar a data final que eu quero. Por exemplo:

	<script>
		$('.cd100').countdown100({
			/*Set Endtime here*/
			/*Endtime must be > current time*/
			endtimeYear: 2018,
			endtimeMonth: 07,
			endtimeDate: 21,
			endtimeHours: 14,
			endtimeMinutes: 0,
			endtimeSeconds: 0,
			timeZone: "America/Sao_Paulo"
			// ex:  timeZone: "America/New_York"
			//go to " http://momentjs.com/timezone/ " to get timezone
		});
	</script>

Entretanto, eu não ter que ficar editando nos códigos toda semana para renovar as datas etc... Então pensei em criar uma pagina administrativa (apenas eu terei acesso), e fazer um formulário perguntando o dia, hora etc do proximo ep. A ideia era enviar o formulario, e criar variaveis no index da pagina para receber esses dados e alterar automaticamente a data. Como tentei aqui:

Variáveis:

$dia        = $_POST['dia'];
$mes        = $_POST['mes'];
$ano		 = $_POST['ano'];
$hora		 = $_POST['hora'];
$min		 = $_POST['minuto'];
$ep		 = $_POST['ep'];

Tempo:

	<script>
		$('.cd100').countdown100({
			/*Set Endtime here*/
			/*Endtime must be > current time*/
			endtimeYear: $ano,
			endtimeMonth: $mes,
			endtimeDate: $dia,
			endtimeHours: $hora,
			endtimeMinutes: $min,
			endtimeSeconds: 0,
			timeZone: "America/Sao_Paulo"
			// ex:  timeZone: "America/New_York"
			//go to " http://momentjs.com/timezone/ " to get timezone
		});
	</script>

Mas não esta funcionando. Andei dando uma pesquisada e percebi que não da pra receber dados em uma pagina html pura, de uma pagina em php. Apenas se usar js, porém eu não entendo muito.

Este são os formulários da pagina em php:

<form class="contact100-form validate-form" method="post" action="index.php">
<span class="m1-txt2"><p align='center'><font color='#FFFFFFF'><strong>Data: </strong></font></span>	    
<select name="dia">
		<option value="01">01</option>
		<option value="02">02</option>
  .
  .
  .
  	<div class="w-full">
		<button class="flex-c-m s2-txt2 size4 bg1 bor1 hov1 trans-04" type="submit">Atualizar</button>
	</div>
</form>

Alguém poderia me ajudar? Agradeço desde já.

DiF · 20 de julho de 2018

@Glouk Você está certo, isso não vai funcionar porque o HTML não interpreta os códigos em php.

No caso você deve criar um index.php e colocar seu código ali.

Quanto a as variáveis php no javascript você pode fazer desta maneira:

<script>
		$('.cd100').countdown100({
			/*Set Endtime here*/
			/*Endtime must be > current time*/
			endtimeYear: <?php echo $ano ?>,
			endtimeMonth: <?php echo $mes ?>,
			endtimeDate: <?php echo $dia ?>,
			endtimeHours: <?php echo $hora ?>,
			endtimeMinutes: <?php echo $min ?>,
			endtimeSeconds: 0,
			timeZone: "America/Sao_Paulo"
			// ex:  timeZone: "America/New_York"
			//go to " http://momentjs.com/timezone/ " to get timezone
		});
	</script>

Lembrando que o index DEVE ser em .php

Sobre o formulário, você pode usar o jquery ajax e fazer a requisição em um arquivo php para trazer do bando de dados as datas, horas, o EP que deseja.. e por aí vai.

Glouk · 21 de julho de 2018

Entendi, eu alterei o index para .php mas com os codigos html.

Estou puxando as variáveis corretamente?

1 hora atrás, DiF disse:

Sobre o formulário, você pode usar o jquery ajax e fazer a requisição em um arquivo php para trazer do bando de dados as datas, horas, o EP que deseja.. e por aí vai

Não entendi muito bem esta parte. Pode explicar melhor? Sou iniciante e um pouco leigo, perdão

As imagens de exemplo são estas:

Exemplo que como fica regredindo. Perceba que a variável do ep não esta sendo reconhecida, e nem mesmo a da data, esta é apenas um exemplo:

Esta é a pagina de atualização da data, no episodio, é onde irei alterar apenas o numero da #

Agradeço

DiF · 21 de julho de 2018

@Glouk Então, a sua ideia é que ao emitir os dados deste formulário, apareça como na imagem acima.

Isso eu entendi.

O maior problema daí é que os dados não são "permanentes", ou seja, quando emitir no botão atualizar, você envia os dado ao arquivo php e resgata em uma variável.

Porém ao fechar a janela os dados serão perdidos. Por isso é necessário um banco de dados.

No caso você pode criar um bem simples por exemplo:

Tabela uma tabela chamada podcasts com a seguinte estrutura:

ID (INT 11 Auto increment Primary Key)

data ( DATETIME)

episodio(INT 11)

A tabela populada ficaria da seguinte forma ao emitir os dados do seu formulário:

ID data                  episodio  
1  2018-07-20 20:30:00      2

Repare que a data já possui a hora. Este campo no banco de dados é o Datetime.

Quando você emitir o formulário, é feito um update set nos campos da tabela, substituindo o valor anterior ou adicionando um, caso ele estejam "vazio".

Não sei qual é a sua ideia sobre os outros episódios, se você pensa em deixar um registro para buscas depois, este jeito não serve. Mas se é só para "atualizar" o seu anuncio, pode ser assim apenas editando os campos.

Ok, Agora que já os dados armazenados, podemos fazer a consulta:

SELECT data, episodio FROM podcasts

Como só teria um registro então não precisa especificar clausulas como where.

Os dados que serão retornados no PHP serão:

A data e número do episódio.

Lembrando que a data no banco de dados vem no padrão AAAA-MM-DD H:M:S por isso será necessário extrair as partes da data de da hora para inserir no seu javascript de countdown.

No PHP podes fazer assim:

$busca = mysqli_query($conexao, "SELECT data, episodio FROM podcasts");

$podcast = mysqli_fetch_object($busca);

//Coloca a data do banco de dados em formato datetime na variável
$data = new DateTime($podcast->data);

//extrai as partes da data e da hora
$ano  = $data->format("Y");
$mes  = $data->format("m");
$dia  = $data->format("d");
$hora = $data->format("H");
$min = $data->format("i");

Com estas variáveis você coloca no seu javascript:

$('.cd100').countdown100({
			/*Set Endtime here*/
			/*Endtime must be > current time*/
			endtimeYear: <?php echo $ano ?>,
			endtimeMonth: <?php echo $mes ?>,
			endtimeDate: <?php echo $dia ?>,
			endtimeHours: <?php echo $hora ?>,
			endtimeMinutes: <?php echo $min ?>,
			endtimeSeconds: 0,
			timeZone: "America/Sao_Paulo"
			// ex:  timeZone: "America/New_York"
			//go to " http://momentjs.com/timezone/ " to get timezone
		});

Devo lembrar que isso só é possível do jeito que mencionei se você cadastrar no banco de dados pelo menos um registro e toda vez que alterar o episódio você faz um update nesta tabela usando o formulário que você criou.

Quanto ao ajax, esta é uma técnica javascript, que permite fazer requisições assíncronas de forma que possa eliminar o famoso "refresh" ou seja, fazer ações sem atualizar a página ou sair dela.

Isso você usaria no formulário, onde não irias mais utilizar o "action", pois isso seria feito via javascript.

Por exemplo:

$(".atualizar").on("click", function(){
    var formDados = $(".seuFormulario").serialize();
    
    $.ajax({
          url: "recebeDados.php",
          data: formDados,
          dataType: "HTML",
          method: "POST"

    }).done(function(retorno){
          alert(retorno);

    }).fail(function(retorno){
          alert(retorno);
    });

});

Basicamente estamos dizendo ali que ao clicar no botão "Atualizar", é requisitado o arquivo recebeDados.php e é emitido os valores dos campos do formulário para este arquivo php.

a função done() faz com que possa mostrar uma mensagem quando a requisição foi bem sucedida. Já a função fail() faz o inverso.

E por fim, o arquivo recebeDados.php receberia os dados da seguinte forma para atualizar:

$dia  = $_POST["dia"];
$mes  = $_POST["mes"];
$ano  = $_POST["ano"];
$hora = $_POST["hora"];
$min  = $_POST["min"];
$ep   = $_POST["ep"];

//inclui a conexão com o BD
include "conexao.php";

//Define formato para o banco de dados: AAA-MM-DD H:M:S
$dataBanco = date($ano."-".$mes."-".$dia." ".$time3.":".$time4.":"."00");

//faz a atualização
$Atualizar = mysqli_query($conexao, "UPDATE podcasts SET data='$dataBanco', episodio='$ep' WHERE id=1");  


if($atualizar):
   echo "O podcast foi atualizado com sucesso!";
else:
   echo "Algo deu errado :( tente novamente!";
endif;

Basicamente, ali estamos dizendo que foi recebido os dados do formulário e guardou cada um em uma variável.

Criamos uma nova variável para concatenar o data para o formato datetime com hora e data juntos.

Depois executa-se a query da atualização e os retornos ali dentro do IF, serão mostrados lá no alert() da função done() ou fail() pela variável "retorno".

Bem é por aí a coisa.

Glouk · 21 de julho de 2018

Certo, compreendi tudo. E estou conseguindo.

Mas estou retornando um erro do receber.php

A primeira mensagem é do conexao.php

A segunda do php que esta recebendo o formulario para gravar no banco de dados.

É um servidor mariadb, sera que pode estar com dificuldade para gravar devido a codificação?

DiF · 21 de julho de 2018

@Glouk Troque o Banco de dados. Passe a usar o Mysql em conjunto com o phpmyadmin.

A mensagem de erro acontece porque provavelmente você deve estar tentando fazer os procedimentos usando o o meu código em MYSQL.

Ademais, poste os seus código para análise.

Glouk · 21 de julho de 2018

Sim, esta exatamente igual o seu.

17 horas atrás, DiF disse:

o arquivo recebeDados.php receberia os dados da seguinte forma para atualizar:

apenas editei o conexao.php para conectar no banco, mas a gravação esta igual o seu exemplo.

DiF · 21 de julho de 2018

@Glouk Então.. esse é o erro. Troque o banco de dados maridaDb pelo Mysql.

Recomendo por exemplo instalar o programa EasyPHP e testar localmente. Posterior, você envia ao seu servidor e configura lá que também vai usar o mysql.

Glouk · 21 de julho de 2018

Bom, consegui resolver, era um pequeno problema do nome do banco.

Ele esta dando a mensagem de que foi salvo com sucesso! Entretanto no banco de dados esta vazio.

adicionado 47 minutos depois

Tem algo de errado com a configuração da tabela?

DiF · 21 de julho de 2018

@Glouk A princípio não.

Mas é imprescindível que você poste seus códigos, da forma que você fez.

Desde arquivo de conexao.php, a parte do php de inserção na tabela... e etc.

Não adianta dizer que está exatamente igual como mostrei, precisa ser do jeito que você colocou aí.

Lembre-se de que como a tabela não tem dados, ainda, é necessário primeiro fazer uma inserção, baseado no primeiro episódio.

No caso usar o INSERT INTO. Depois disso, a partir do segundo você poderá fazer o UPDATE set.

Por isso, o ideal é primeiro fazer uma verificação, SE não há dados, faz uma primeira inserção, se houver pelo menos 1 registro, faz o update.

Lembrando também que isso tudo é baseado na premissa de que a tabela vai conter apenas UM registro e este registro será modificado toda vez que mudar o episódio.