Ir para conteúdo
Deizi Buganti

Como fazer um contador de clicks PHP, HTML, MYSQL

Recommended Posts

Boa tarde,



Primeiramente, estou usando o Framework CodeIgniter e uso também o Bootstrap.



Agora, em uma de minhas páginas eu tenho uma imagem que é mapeada (utilizo a tag map) conforme abaixo:



<img src="<?php echo base_url('/assets/midia/ambientes/parque.png');?>" alt="Parque" usemap="#Map" />
<map name="Map" id="Map">
<area alt="Sol" id="sol" href="<?php echo base_url('assets/midia/videos/video.mp4');?>" class="html5lightbox" title="Sol" shape="rect" coords="52,11,169,114"/>
</map>

No caso, tenho a imagem de um parque no qual a área dessa imagem que tem o sol, é "clicável", quando a mesma for clicada ela abre um vídeo.



Como eu poderia fazer para que quando o usuário clicasse nessa área (sol), além de abrir o vídeo, fosse atualizado no banco de dados (mysql) a minha tabela, onde eu tenho o nome da imagem e uma variável que receberia a contagem dos cliques (qtdclick), tabela:



CREATE TABLE `preferencia` (
`codpreferencia` int(11) NOT NULL,
`nomeimg` varchar(200) NOT NULL,
`qtdclick` int(11) NOT NULL
)

Eu preciso dessa contagem para depois poder gerar alguns gráficos de preferência dos usuários para colocar em um artigo. Desse modo, preciso que a contagem somente aconteça quando ocorrer o click na área citada. Vi que isso deve ser feito em PHP, até encontrei alguns exemplos, mas não se encaixaram nisso que eu preciso.



Se alguém puder me ajudar, agradeço.


Compartilhar este post


Link para o post
Compartilhar em outros sites

Boa tarde, obrigada pela resposta.

Teria algum exemplo de como fazer isso? Nunca trabalhei com o Ajax .. teria como restringir essa função ao clique? Pois estive testando uns exemplos só que eles atualizam a contagem no atualizar da página e não quando ocorre o clique.

Agradeço a atenção.

Compartilhar este post


Link para o post
Compartilhar em outros sites

O uso de ajax iria funcionar perfeitamente eu acho, vou tentar descrever como eu faria o código baseando numa situação fictícia quase igual a sua. (Não sei se é a melhor forma de fazer assim, pois também sou iniciante no assunto)

Imagina que iria precisar fazer o update da quantidade de cliques e levar o nome da img clicada.

<img onlick="atualiza()" src="<?php echo base_url('/assets/midia/ambientes/parque.png');?>" alt="Parque" usemap="#Map" />
<input type="hidden" id="nomeImagem" value="nome da imagem">
<div id="respAtualiza"></div>
<map name="Map" id="Map">
<area alt="Sol" id="sol" href="<?php echo base_url('assets/midia/videos/video.mp4');?>" class="html5lightbox" title="Sol" shape="rect" coords="52,11,169,114"/>
</map>

No seu java script cria uma função.

function atualiza(){
var nomeImagem = $("#nomeImagem").val();

$("#respAtualiza").load(encodeURI('paginaPHP.php?nomeImg=' + nomeImagem)
}

Ai na pagina PHP que vai receber os dados é mais ou menos assim:

<?php
$nomeImg = $_GET['nomeImg'];

//agora com o nome da imagem você consulta os dados no BD e manipula o clique. 

?>

É necessario importar a biblioteca do jquery no seu código.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Meu caro, eu até tenho, mas ta na minha casa e não lembro de cor como faz.

Boa tarde, obrigada pela resposta.

Teria algum exemplo de como fazer isso? Nunca trabalhei com o Ajax .. teria como restringir essa função ao clique? Pois estive testando uns exemplos só que eles atualizam a contagem no atualizar da página e não quando ocorre o clique.

Agradeço a atenção.

Compartilhar este post


Link para o post
Compartilhar em outros sites

O uso de ajax iria funcionar perfeitamente eu acho, vou tentar descrever como eu faria o código baseando numa situação fictícia quase igual a sua. (Não sei se é a melhor forma de fazer assim, pois também sou iniciante no assunto)

Imagina que iria precisar fazer o update da quantidade de cliques e levar o nome da img clicada.

<img onlick="atualiza()" src="<?php echo base_url('/assets/midia/ambientes/parque.png');?>" alt="Parque" usemap="#Map" />
<input type="hidden" id="nomeImagem" value="nome da imagem">
<div id="respAtualiza"></div>
<map name="Map" id="Map">
<area alt="Sol" id="sol" href="<?php echo base_url('assets/midia/videos/video.mp4');?>" class="html5lightbox" title="Sol" shape="rect" coords="52,11,169,114"/>
</map>

No seu java script cria uma função.

function atualiza(){
var nomeImagem = $("#nomeImagem").val();

$("#respAtualiza").load(encodeURI('paginaPHP.php?nomeImg=' + nomeImagem)
}

Ai na pagina PHP que vai receber os dados é mais ou menos assim:

<?php
$nomeImg = $_GET['nomeImg'];

//agora com o nome da imagem você consulta os dados no BD e manipula o clique. 

?>

É necessario importar a biblioteca do jquery no seu código.

Desculpe, mas não entendi direito, no meu caso, eu preciso que quando uma área da imagem principal for clicada ele faça a contagem do clique.

Imagem principal:

<img src="<?php echo base_url('/assets/midia/ambientes/parque.png');?>" alt="Parque" usemap="#Map" border="0"/>

E as áreas "clicáveis" das quais eu preciso contar os cliques estão na tag map ditas como area:

<area id="sol" target="_blank" alt="sol" href="<?php echo base_url('assets/midia/videos/video.mp4');?>" class="html5lightbox" coords="115,490,185,518" shape="rect"> 

O onClick seria colocado na tag <area> ? E a div usada em seu exemplo, seria necessário para que finalidade?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom, agradeço quem me ajudou, de verdade. :)

JavaScript:

<script type="text/javascript">
			$(document).ready(function(){
		        $(".html5lightbox").click(function(){
		                $.ajax({
		                        url: '<?= base_url(); ?>' + 'index.php/contaclick',
		                        type: 'POST',
		                        data: {valorid:$(this).attr('id')},
		                        success: function(msg){
		                            if(msg == 'ok'){
		                                jQuery.fn.reset = function(){
		                                        $(this).each(function(){ this.reset();});
		                                    }
		                            }
		                            }
		                    });
		                return false;
		            });
		    });     
</script>

O meu Controller "contaclick.php":

$this->load->model('conta');
$this->conta->contar();
echo "ok";

E o Model "conta.php":

public function contar() {
		$query = $this->db->query('SELECT qtdclick FROM preferencia WHERE nomelink="'.$this->input->post('valorid', TRUE). '" LIMIT 1');
		$row = $query->row();
		$qtd = $row->qtdclick;
		
		$qtd = $qtd+1;
		
		$this->db->where('nomelink', $this->input->post('valorid', TRUE));
		$this->db->update('preferencia', array(
				'qtdclick' => $qtd
		));
	}

Obrigada novamente e, se houver alguma sugestão e/ou maneira de otimizar fico à disposição para discutir. :D

Boa noite.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Loconarrativo
      Bom, no meu form, eu peço para o cliente digitar um valor (esse valor em reais), mas para continuar eu preciso me certificar que a variável que contem o valor, tenha 16 dígitos ao total, então se a pessoa digita uma 1000.00, eu preciso completar com 9 zeros a esquerda (fica assim 0000000001000.00), para eu saber quantos dígitos tem na variável, eu faço
      $i = strlen( $_POST['valor']);   ai eu faço
      $u = 8 - $i ; eu tenho o numero de zeros que preciso colocar a esquerda, mas como eu transformo isso em vários zeros? 
    • Por leandrosv
      Boa tarde pessoal, uma dúvida somente,se conseguirem  me responder ficarei grato!.
      Programo em php há 6 meses. Até o momento foquei em aprender e fazer para  mim.
      Peguei meu primeiro projeto, para um amigo, porém design, css e javascript não é meu forte, falta criatividade e aprender bastante sobre o JS.
      A duvida é a seguinte: Comprei um tema no themeforest.net à escolha dele(amigo), e o tema veio com puglins woocommerce, a minha dúvida é se posso hospedar e utilizar normalmente no site esses plugins sem usar o sistema wordpress. Editei o código js e css do que não me interessa e está funcionando legal. A dúvida mesmo, unica dúvida é se posso e vou conseguir rodar meu site em uma hospedagem normal sem o sistema wordpress.
      Obrigado!
      **moderadores e administradores do fórum, caso seja aqui um tópico errado, perdão, procurei mas não achei nada a respeito do assunto.
    • Por Marcos Bellini
      Olá amigos, alguém já fez integração do Frenet (frenet.com.br) utilizando PHP?
       
      Vi que existe muitos módulos prontos para Magento e etc, porém quero integrar com minha loja, código próprio e estou tendo dificuldades.
       
      Alguém já fez o mesmo?
    • Por M. Alberto
      O que preciso alterar para acessar meu banco de dados remotamente?
       
      Tenho o IP e outros dados... como faço com este código?
       
      <?php $link = mysql_connect('localhost', 'USUARIO_NOME', 'SENHA_ACESSO'); if (!$link) { die('Não conseguiu conectar: ' . mysql_error()); } $db_selected = mysql_select_db('BANCODEDADOS_NOME', $link); if (!$db_selected) { die ('Não pode selecionar o banco : ' . mysql_error()); } $rst_pedidos=mysql_query("SELECT * FROM pedidosgarotao WHERE impresso='nao' ORDER BY id",$link); $num_pedidos=mysql_num_rows($rst_pedidos); if ($num_pedidos==0) { ?>  
    • Por M. Alberto
      Estou realizando a migração de meu site que utiliza um banco de dados em mySQL PHP porém estou obtendo erro.
       
      Criei o banco de dados e fiz upload dos arquivos, porém agora neste servidor não roda de maneira alguma. Alguém poderia me ajudar ?
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.