Salvar dados na tabela com JAVASCRIPT

Jack Oliveira · Junho 21, 2021

Ola pessoal boa noite preciso salvar umas coisas no banco de dados usando ao clicar no botão que esteja aparecendo sem que recarregue a página

Seria isso aqui

HTML do botão

                                                <div class="btn-group">
                                                    <a href="javascript:void(0)" class="rate-btn toggole-contnet">
                                                        <i class="fa fa-thumbs-o-up" aria-hidden="true"></i> Sim
                                                    </a>
                                                    <a href="javascript:void(0)" class="rate-btn toggole-contnet">
                                                        <i class="fa fa-thumbs-o-down" aria-hidden="true"></i> Não
                                                    </a>
                                                </div>

No PHP para salvar no banco esta da seguinte forma.

<?php  if(isset($_POST['AvaliComentario'])) {
		// Se o cookie ainda não foi setado
$cookie = isset($_COOKIE["avali_comentario_".$Comentario['id']]) ? $_COOKIE["avali_comentario_".$Comentario['id']] : null;
if (!isset($cookie)) {		
		
		$Adicionar = array(
			'comentario_id' 	=> $Comentario['id'],
			'up' 	            => post('up'),
			'down' 	            => post('down')
		);
		$Query = DBCreate('avali_comentario', $Adicionar);
		
   // Se for um sucesso a query
    if ($Query)
    {
        // Seta um cookie
        setcookie("avali_comentario_".$Comentario['id']."", true, time()+60*60*24*6004);
        // Retorna false, ou seja, sucesso
        echo false;
		
 Redireciona(''.$URLSHARE.'');	
    }else{
	//AbreAlerta("Erro! Ouve um erro ao  ".$dados['titulo']."!");
		 //Redireciona(''.$URLSHARE.'');
	}
			

	 }else{		
	//Sweet('Atenção!!!', 'Você já deu  sua Curtida para '.$dados['titulo'].'!', 'warning', 'Fechar');

	//AbreAlerta("Ops! Você já deu  sua Curtida para ".$dados['titulo']."!");
		//Redireciona(''.$URLSHARE.'');
		 
 }
 
}

Só preciso para quando clicar uns dos botão ele salvar sem precisar carregar a página...

Se ter um forma diferente para fazer fico grato pelas dicas que puderem dar ai..

Omar~ · Junho 21, 2021

2 horas atrás, Jack Oliveira disse:

sem que recarregue a página

Use AJAX para carregar um arquivo que irá registrar a avaliação. Nesse arquivo não use redirecionamento.

Ao clicar no botão pode enviar a informação do que foi clicado por protocolo GET ou POST, tanto faz o que conta mesmo é como esse dado será tratado no back-end.

Só um detalhe usar um cookie pode não ser o mais ideal, uma vez que o usuário pode está com cookies bloqueados no browser o mesmo limpar o cache ele vai poder avaliar novamente.

Sugiro uma tabela para registrar o que o usuário já avaliou.

Mas caso não seja um problema o usuário poder avaliar diversas vezes a mesma coisa, desconsidere....

Jack Oliveira · Junho 21, 2021

13 horas atrás, Omar~ disse:

uma vez que o usuário pode está com cookies bloqueados no browser o mesmo limpar o cache ele vai poder avaliar novamente

Ola @Omar~ Boa tarde então esta aparte que usará cookies seria bloquear para que os mesmo não fazem mais de uma vez...

Porem os usuários que poderá fazer as avaliações será quando fazerem algum comentário e sim poder dar sua avaliação, neste caso eles não teria login entende??

Teria como fazer pelo IP de uso do usuários ou seja da maquina ou mesmo da rede da internet IP?

Jack Oliveira · Junho 21, 2021

13 horas atrás, Omar~ disse:

Use AJAX para carregar um arquivo que irá registrar a avaliação. Nesse arquivo não use redirecionamento.

Ao clicar no botão pode enviar a informação do que foi clicado por protocolo GET ou POST, tanto faz o que conta mesmo é como esse dado será tratado no back-end.

Sobre aqui certo vou fazer obrigado....

Omar~ · Junho 21, 2021

1 hora atrás, Jack Oliveira disse:

Teria como fazer pelo IP de uso do usuários ou seja da maquina ou mesmo da rede da internet IP?

Tem sim (pelo ip físico da máquina do usuário dizem que tem como obter o DNS também, mas não sei como).

Há uma possibilidade de erro (duplicar o mesmo), mas se colocar-mos IP + dados da máquina + sistema operacional você terá uma margem bem alta de precisão, pode acontecer de duplicar, mas seria extremamente raro.

Veja essa classe com ela você pode obter o IP o SO e até o browser que o usuário esteja usando.

Spoiler


<?php
/**
 * ********************************************
 * @Copyright (c) 2017, Spell Master.
 * @version 1.2 : 2018 Spell Master
 * ********************************************
 * @Class: Retorna dados na máquina que está
 * acessamdo o servidor.
 * ********************************************
 */

class UserAgent {

    private $userData;
    private $userIP;
    private $setOS;
    private $setBrowser;
    private $osTrue = null;
    private $browserTrue = null;

    /**
     * ****************************************
     * Define os dados e chama os métodos.
     * ****************************************
     */
    function __construct() {
        $filterServe = filter_input_array(INPUT_SERVER, FILTER_DEFAULT);
        $filterIp = filter_input_array(INPUT_SERVER, FILTER_VALIDATE_IP);
        $this->userData = $filterServe['HTTP_USER_AGENT'];
        $this->userIP = $filterIp['REMOTE_ADDR'];
        $this->checkOs();
        $this->checkBrowser();
    }

    /**
     * ****************************************
     * Verifica o sistema operacional.
     * ****************************************
     */
    private function checkOs() {
        $os = ['/windows nt 10/i' => 'Windows 10', '/windows nt 6.3/i' => 'Windows 8.1', '/windows nt 6.2/i' => 'Windows 8', '/windows nt 6.1/i' => 'Windows 7', '/windows nt 6.0/i' => 'Windows Vista', '/windows nt 5.2/i' => 'Windows Server 2003/XP x64', '/windows nt 5.1/i' => 'Windows XP', '/windows xp/i' => 'Windows XP', '/windows nt 5.0/i' => 'Windows 2000', '/windows me/i' => 'Windows ME', '/win98/i' => 'Windows 98', '/win95/i' => 'Windows 95', '/win16/i' => 'Windows 3.11', '/macintosh|mac os x/i' => 'Mac OS X', '/mac_powerpc/i' => 'Mac OS 9', '/linux/i' => 'Linux', '/ubuntu/i' => 'Ubuntu', '/iphone/i' => 'iPhone', '/ipod/i' => 'iPod', '/ipad/i' => 'iPad', '/android/i' => 'Android', '/blackberry/i' => 'BlackBerry', '/webos/i' => 'Mobile'];
        foreach ($os as $reg => $value) {
            if (preg_match($reg, $this->userData)) {
                $this->setOS = (string) $value;
                $this->osTrue = true;
            }
        }
    }

    /**
     * ****************************************
     * Verifica o navegador.
     * ****************************************
     */
    private function checkBrowser() {
        $browser = ['/msie/i' => 'Internet Explorer', '/firefox/i' => 'Firefox', '/safari/i' => 'Safari', '/chrome/i' => 'Chrome', '/edge/i' => 'Edge', '/opera/i' => 'Opera', '/netscape/i' => 'Netscape', '/maxthon/i' => 'Maxthon', '/konqueror/i' => 'Konqueror', '/mobile/i' => 'Handheld Browser'];
        foreach ($browser as $reg => $value) {
            if (preg_match($reg, $this->userData)) {
                $this->setBrowser = (string) $value;
                $this->browserTrue = true;
            }
        }
    }

    /**
     * ********************************************
     * Retorna os dados da máquina que está
     * acessando.
     * ****************************************
     */
    public function getUserMachine() {
        return $this->userData;
    }

    /**
     * ********************************************
     * @Method: Retorna o sistema operacional da máquina
     * que está acessando.
     * ****************************************
     */
    public function getOs() {
        if (isset($this->osTrue)) {
            return $this->setOS;
        } else {
            return " ";
        }
    }

    /**
     * ********************************************
     * @Method: Retorna o navegador da máquina que está
     * acessando.
     * ****************************************
     */
    public function getBrowser() {
        if (isset($this->browserTrue)) {
            return $this->setBrowser;
        } else {
            return " ";
        }
    }

    /**
     * ********************************************
     * Obtem o endereço de IP da máquina que
     * está acessando.
     * ****************************************
     */
    public function requestIP() {
        return $this->userIP;
    }
}

No entanto de qualquer forma terá que registrar em algum lugar no servidor, seja um banco de dados, um XML JSON, TXT etc... Não importa tem que registrar em algum lugar para saber se o usuário já fez a sua avaliação.

Jack Oliveira · Junho 21, 2021

16 horas atrás, Omar~ disse:

Use AJAX para carregar um arquivo que irá registrar a avaliação. Nesse arquivo não use redirecionamento.

Ao clicar no botão pode enviar a informação do que foi clicado por protocolo GET ou POST, tanto faz o que conta mesmo é como esse dado será tratado no back-end.

Ola @Omar~

Quero fazer usando data-value Tu sabes como posso usar ou seja montar ele para que seja gravado apenas se for clicado em uns dos botões?

Na minha tabela fiz isso aqui, sem que não tem nada a ver aqui...

CREATE TABLE `avali_comentario` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `comentario_id` int(11) NOT NULL,
  `up` int(11) NOT NULL,
  `down` int(11) NOT NULL,  
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

Veja aqui no html como que posso bloquear se uns dos botão já tiver sindo clicado?

                                                <div class="btn-group">
												<form method="post" action="" id="ajax_form">
                                                    <a href="javscript:void(0)" data-value="1" class="rate-btn toggole-contnet">
                                                        <i class="fa fa-thumbs-o-up" aria-hidden="true"></i> Sim
                                                    </a>
                                                    <a href="javscript:void(0)" data-value="2" class="rate-btn toggole-contnet">
                                                        <i class="fa fa-thumbs-o-down" aria-hidden="true"></i> Não
                                                    </a>
													</form>
                                                </div>

No javascript fiz isso

	<script type="text/javascript">
	jQuery(document).ready(function(){
		jQuery('#ajax_form').submit(function(){
			var dados = jQuery( this ).serialize();

			jQuery.ajax({
				type: "POST",
				url: "ajax/avaliar_listagem.php",
				data: dados,
				success: function( data )
				{
					alert( data );
				}
			});
			
			return false;
		});
	});
	</script>

No avaliar_listagem.php seria o mesmo aqui no PHP

<?php  if(isset($_POST['AvaliComentario'])) {
		// Se o cookie ainda não foi setado
$cookie = isset($_COOKIE["avali_comentario_".$Comentario['id']]) ? $_COOKIE["avali_comentario_".$Comentario['id']] : null;
if (!isset($cookie)) {		
		
		$Adicionar = array(
			'comentario_id' 	=> $Comentario['id'],
			'up' 	            => post('up'),
			'down' 	            => post('down')
		);
		$Query = DBCreate('avali_comentario', $Adicionar);
		
   // Se for um sucesso a query
    if ($Query)
    {
        // Seta um cookie
        setcookie("avali_comentario_".$Comentario['id']."", true, time()+60*60*24*6004);
        // Retorna false, ou seja, sucesso
        echo false;
		
 Redireciona(''.$URLSHARE.'');	
    }else{
	AbreAlerta("Erro! Ouve um erro ao  ".$dados['titulo']."!");
		 //Redireciona(''.$URLSHARE.'');
	}
			

	 }else{		
	//Sweet('Atenção!!!', 'Você já deu  sua Curtida para '.$dados['titulo'].'!', 'warning', 'Fechar');

	AbreAlerta("Ops! Você já deu  sua Curtida para ".$dados['titulo']."!");
		//Redireciona(''.$URLSHARE.'');
		 
 }
 
}

Sobre o que tu mandou qui vou dar um estudada nele..

39 minutos atrás, Omar~ disse:

Tem sim (pelo ip físico da máquina do usuário dizem que tem como obter o DNS também, mas não sei como).

Há uma possibilidade de erro (duplicar o mesmo), mas se colocar-mos IP + dados da máquina + sistema operacional você terá uma margem bem alta de precisão, pode acontecer de duplicar, mas seria extremamente raro.

Veja essa classe com ela você pode obter o IP o SO e até o browser que o usuário esteja usando.

Mostrar conteúdo oculto



<?php
/**
 * ********************************************
 * @Copyright (c) 2017, Spell Master.
 * @version 1.2 : 2018 Spell Master
 * ********************************************
 * @Class: Retorna dados na máquina que está
 * acessamdo o servidor.
 * ********************************************
 */

class UserAgent {

    private $userData;
    private $userIP;
    private $setOS;
    private $setBrowser;
    private $osTrue = null;
    private $browserTrue = null;

    /**
     * ****************************************
     * Define os dados e chama os métodos.
     * ****************************************
     */
    function __construct() {
        $filterServe = filter_input_array(INPUT_SERVER, FILTER_DEFAULT);
        $filterIp = filter_input_array(INPUT_SERVER, FILTER_VALIDATE_IP);
        $this->userData = $filterServe['HTTP_USER_AGENT'];
        $this->userIP = $filterIp['REMOTE_ADDR'];
        $this->checkOs();
        $this->checkBrowser();
    }

    /**
     * ****************************************
     * Verifica o sistema operacional.
     * ****************************************
     */
    private function checkOs() {
        $os = ['/windows nt 10/i' => 'Windows 10', '/windows nt 6.3/i' => 'Windows 8.1', '/windows nt 6.2/i' => 'Windows 8', '/windows nt 6.1/i' => 'Windows 7', '/windows nt 6.0/i' => 'Windows Vista', '/windows nt 5.2/i' => 'Windows Server 2003/XP x64', '/windows nt 5.1/i' => 'Windows XP', '/windows xp/i' => 'Windows XP', '/windows nt 5.0/i' => 'Windows 2000', '/windows me/i' => 'Windows ME', '/win98/i' => 'Windows 98', '/win95/i' => 'Windows 95', '/win16/i' => 'Windows 3.11', '/macintosh|mac os x/i' => 'Mac OS X', '/mac_powerpc/i' => 'Mac OS 9', '/linux/i' => 'Linux', '/ubuntu/i' => 'Ubuntu', '/iphone/i' => 'iPhone', '/ipod/i' => 'iPod', '/ipad/i' => 'iPad', '/android/i' => 'Android', '/blackberry/i' => 'BlackBerry', '/webos/i' => 'Mobile'];
        foreach ($os as $reg => $value) {
            if (preg_match($reg, $this->userData)) {
                $this->setOS = (string) $value;
                $this->osTrue = true;
            }
        }
    }

    /**
     * ****************************************
     * Verifica o navegador.
     * ****************************************
     */
    private function checkBrowser() {
        $browser = ['/msie/i' => 'Internet Explorer', '/firefox/i' => 'Firefox', '/safari/i' => 'Safari', '/chrome/i' => 'Chrome', '/edge/i' => 'Edge', '/opera/i' => 'Opera', '/netscape/i' => 'Netscape', '/maxthon/i' => 'Maxthon', '/konqueror/i' => 'Konqueror', '/mobile/i' => 'Handheld Browser'];
        foreach ($browser as $reg => $value) {
            if (preg_match($reg, $this->userData)) {
                $this->setBrowser = (string) $value;
                $this->browserTrue = true;
            }
        }
    }

    /**
     * ********************************************
     * Retorna os dados da máquina que está
     * acessando.
     * ****************************************
     */
    public function getUserMachine() {
        return $this->userData;
    }

    /**
     * ********************************************
     * @Method: Retorna o sistema operacional da máquina
     * que está acessando.
     * ****************************************
     */
    public function getOs() {
        if (isset($this->osTrue)) {
            return $this->setOS;
        } else {
            return " ";
        }
    }

    /**
     * ********************************************
     * @Method: Retorna o navegador da máquina que está
     * acessando.
     * ****************************************
     */
    public function getBrowser() {
        if (isset($this->browserTrue)) {
            return $this->setBrowser;
        } else {
            return " ";
        }
    }

    /**
     * ********************************************
     * Obtem o endereço de IP da máquina que
     * está acessando.
     * ****************************************
     */
    public function requestIP() {
        return $this->userIP;
    }
}

No entanto de qualquer forma terá que registrar em algum lugar no servidor, seja um banco de dados, um XML JSON, TXT etc... Não importa tem que registrar em algum lugar para saber se o usuário já fez a sua avaliação.

Vou criar uma tabela para pegar as informações necessárias

Obrigado pela esta ajuda

Omar~ · Junho 22, 2021

Aqui eu estou supondo que haja apenas uma postagem ou várias a avaliar por página.

Se for várias apenas os form's devem ser gerados dentro de um loop das postagens.

Vou resumir, apesar de ser algo bem simples requer algumas manipulações do front para termos a coisa dinâmica, mas nada complicado.

<?php
$postID = 99;
?>
<form method="post" action="" id="ajax_form_<?= $postID ?>">
    <input type="hidden" name="alvo_da_postagem" value="<?= $postID ?>" />
    <input type="text" name="avaliar" value="" /> <!-- Mude para type="hidden" está como text para você testar aí -->

    <a data-value="1" class="voto">Sim</a>
    <a data-value="2" class="voto">Não</a>
</form>

<script>
    var botoes = document.getElementsByClassName('voto'); // Obtenho os botões de avaliação
  	if (typeof botoes !== 'undefined' && botoes !== null) { // Depois eu digo o porque disso
    	for (var i = 0; i < botoes.length; i++) {
        	botoes[i].addEventListener('click', salvarForm, false); // Adiciono evento click a cada botão
    	}
    }

    function salvarForm(e) {
        var alvo = e.target; // Obtenho o correto botão clicado
        var pai = alvo.parentNode; // Obtenho o elemento pai é o form "alvo.parentNode"
      	/*
        O primeiro elemento filho é um input que irá identificar o id da postagem "children[0]"
        Encontro o input para adicionar o valor da avaliação que é o segundo filho "children[1]"
        Então nesse filho que é o que tenho de manipular adiciono o valor do atributo data do botão clicado
        */
        pai.children[1].value = alvo.dataset.value;
       
       /*
       	AQUI então você salva o form por ajax
        Caso precise identificar o id do formulário lembre-se que já o encontramos
        então caso precise o "pai.id"
        será o mesmo valor que o foi renderizado no HTML id="ajax_form_<?= $postID ?>"
        */
    }
</script>

Então no arquivo que vai receber os dados do form você terá o

$_POST['alvo_da_postagem'] >>>> Que é o id da postagem para avaliar

$_POST['avaliar'] >>>> Que é data-value clicado pelo usuário

Nesse mesmo arquivo ao salvar a avaliação poderemos manipular o HTML

Como o #ID do form está assim ajax_form_<?= $postID ?> e $_POST['alvo_da_postagem'] será o mesmo que $postID então podemos chegar ao formulário para manipular qualquer um de seus elementos filhos no caso remover o ouvinte de eventos click do botão clicado

Assim sendo não podendo clicar novamente no mesmo ou em ambos, sei lá como vai querer fazer...

document.getElementById('ajax_form_<?= $_POST['alvo_da_postagem'] ?>')

Ao caso do usuário recarregar a página fechar e reabrir a página sempre estará disponível os botões de avaliação.

Por isso a importância de também haver registro de qual postagem aquele usuário postou

Aqui eu estarei apenas usando a própria tabela que você apresentou, mas poderá criar outra apenas para essa finalidade de checagem

CREATE TABLE `avali_comentario` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `comentario_id` int(11) NOT NULL,
  `usuario_id` int(11) NOT NULL DEFAULT '1' COMMENT 'ID do usuario que avaliou',
  `up` int(11) NOT NULL,
  `down` int(11) NOT NULL,  
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

Nesse meu caso é só checar se o usuário já fez sua avaliação no post que se segue:

SELECT
    comentario_id,
    usuario_id
FROM
    avali_comentario
WHERE
    comentario_id = '$ID_DO_COMENTARIO'
AND
    usuario_id = '$ID_DO_USUARIO'

Se por exemplo essa query retornar algum valor podemos apenas escrever o html sem executar a função dos botões

<?php
$retornoDaQuery = true; /* Supondo que o usuario já votou porque a query retornou algum valor */
?>

<a <?= ($retornoDaQuery ? 'data-value="1" class="voto"' : null) ?>>Sim</a>
<a <?= ($retornoDaQuery ? 'data-value="2" class="voto"' : null) ?>>Não</a>

Assim sendo se os botões não tem as propriedades necessárias o voto não acontece ou até mesmo poderíamos colocar um IF se sim nem escreveríamos o html deles.

Por isso a identificação da existência pelo typeof antes de adicionar ouvintes nos botões se eles não existirem vai gerar erro de console.

Salvar dados na tabela com JAVASCRIPT

Pergunta

Jack Oliveira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

6 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

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