Como fazer um contador de clicks PHP, HTML, MYSQL

[Deizi Buganti 1]

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.

[gabrielfalieri 15]

Meu caro.
Eu faria assim, quando clicar na sua parte onde você quer, envia uma requisição ajax para alguma página php, onde faria um update da quantidade de cliques.

[Deizi Buganti 1]

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.

[Wesley Santos 28]

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.

[gabrielfalieri 15]

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.

[Deizi Buganti 1]

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?

[Deizi Buganti 1]

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.