Membuat Tooltip Yang Menampilkan Hasil Query Mysql Dengan PHP

Pernahkah melihat sebuah kotak putih berisi penjelasan atau notifikasi ketika mouse diarahkan diatas tulisan atau link pada sebuah website? Kotak putih tersebut dinamakan tooltip. Biasanya tooltip digunakan web developer untuk memberikan penjelasan kepada user tentang fitur atau borang isian pada website.

Lalu bagaimana kalau ingin membuat tooltip yang menampilkan hasil query mysql (dengan php)? Caranya seperti ini🙂

  1. Buat database dengan nama mydb
  2. CREATE TABLE IF NOT EXISTS `mydatabase` (
      `uname` varchar(50) NOT NULL,
      `complete_name` varchar(100) NOT NULL
    ) ENGINE=MyISAM DEFAULT CHARSET=latin1;
    
    --
    -- Dumping data for table `mydatabase`
    --
    
    INSERT INTO `mydatabase` (`uname`, `complete_name`) VALUES
    ('ryan', 'ryan giggs'),
    ('wayne', 'wayne rooney'),
    ('robin', 'robin van persie');
    
  3. Buat file tooltipdb.php (file ini sebagai halaman utama)
  4. <html>
    <head>
    
    <style type="text/css">
    
    #tooltip {
    padding: 4px;
    background-color: #eee;
    border: 1px solid #000;
    text-align: center;
    font-size: 13px;
    z-index:999}
    
    span.tip {border-bottom:1px solid blue;color:blue}
    
    </style>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    
    var x=0;
    var y=0;
    var xx = 12;
    var yy = 10;
    var thetooltip = 0;
    var t;
    
    function e(i){
    	var d = document.createElement('div');
    	d.id = i;
    	d.style.display = 'none';
    	d.style.position = 'absolute';
    	d.innerHTML = "";
    	document.body.appendChild(d);
    }
    
    function wherecursor(e){
    	t = document.getElementById('tooltip');
    	if (!e) var e = window.event;
    	if (e.pageX){x = e.pageX;y = e.pageY;}
    	else if (e.clientX){x = e.clientX + document.body.scrollLeft;y = e.clientY + document.body.scrollTop;}
    	t.style.left = (x+xx) + 'px';
    	t.style.top = (y+yy) + 'px';
    }
    
    function tooltip(thetooltip){
    	if(!document.getElementById('tooltip')) e('tooltip');
    	t = document.getElementById('tooltip');
    	Ajax(thetooltip);
    	t.style.display = 'block';
    	t.style.left = '-1999px';
    	document.onmousemove = wherecursor;
    }
    
    function Ajax(thetooltip){
    	var tm = new Date().getTime();
    	if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari
    		xmlhttp=new XMLHttpRequest();
    	}else{ // code for IE6, IE5
    		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    	}
    	xmlhttp.onreadystatechange=function(){
    		if (xmlhttp.readyState==4 && xmlhttp.status==200){
    			t.innerHTML=xmlhttp.responseText;
    		}
    	}
    	xmlhttp.open("GET","tooltipp.php?id="+thetooltip+"&tm="+tm,true);
    	xmlhttp.send();
    }
    
    function bye(){
    	document.getElementById('tooltip').style.display = 'none';
    }
    
    // -->
    </script>
    
    </head>
    <BODY SCROLL="auto" BGCOLOR="#FFFFFF">
    
    <center><h1>Tooltip Database</h1></center>
    
    <div id='abc' style='background-color:#fff;z-index:99;position:absolute;left:50px;top:100px;width:900px;'>
    <p><span class="tip" onmouseover="tooltip('ryan');" onmouseout="bye();">ryan</span></p>
    <p><span class="tip" onmouseover="tooltip('wayne');" onmouseout="bye();">wayne</span></p>
    <p><span class="tip" onmouseover="tooltip('robin');" onmouseout="bye();">robin</span></p>
    </div>
    
    </body>
    </html>
    
  5. Buat file tooltipp.php (file ini berfungsi melakukan query mysql)
  6. <?php
    	mysql_connect("localhost","root","");
        mysql_select_db("mydb");
    	$id=$_GET['id'];
    	$res = mysql_query("SELECT complete_name FROM mydatabase where uname='$id'") or die(mysql_error());
    	$row = mysql_fetch_array($res);	
    	echo "Complete name is $row[complete_name]";
    ?>
    
  7. Dan hasilnya seperti ini

Referensi : disini (dengan sedikit modifikasi dari saya)

Semoga bermanfaat.

 

Best regards,

kroseva

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s