Berbagi Ilmu

Tuesday, 8 April 2014

Mempercantik Tooltip dengan CSS3

Halo sobat, ketemu lagi dengan saya, hehehe

Hari ini saya akan membahas mengenai cara membuat tooltip sederhana. Tooltip adalah sebuah teks yang muncul ketika kita mengarahkan mouse ke suatu elemen. Dalam HTML untuk membuat tooltip dengan menyisipkan atribut title dan atribut alt untuk tag img. Tooltip biasa digunakan untuk mendeskripsikan sesuatu tentang elemen yang ditunjuk. Sebuah tooltip bisa sangat menarik jika kita dapat menghiasnya dengan menggunakan CSS.

Oke langsung saja pertama-tama kita buat markup HTML-nya terlebih dahulu :

<!DOCTYPE html>
<html>
<head><title>Tooltip CSS</title></head>
<body>
<div id="wrap">
<h1>Tooltip sederhana dengan CSS</h1>
<a class='tooltip' href="#" title="Ini adalah tooltip sederhana."><span title="More">CSS3 Tooltip</span></a>
</div>
</body>
</html>

Saya jelaskan sedikit tentang script diatas. Kita akan meletakkan tooltip di tag a dengan class tooltip. Lah yang tag span buat apa?? Tag span digunakan untuk menghandle title dari tag a agar tidak ditampilkan dua kali. Ini disebabkan oleh setting bawaan browser. Untuk mengatasinya cukup sisipkan tag span dan tambahkan atribut title didalam tag a, sehingga yang akan ditampilkan adalah title yang ada dalam span. Oke langsung saja kita buat CSS-nya :

.tooltip{
display: inline;
position: relative;
}

Script diatas adalah dasar untuk style kita nanti. Tooltip akan ditampilkan secara inline dan dengan posisi relative. Selanjutnya tambahkan script style berikut :

.tooltip:hover:after{

    background: #333;

    background: rgba(0,0,0,.8);

    border-radius: 5px;

    bottom: 26px;

    color: #fff;

    content: attr(title);

    left: 20%;

    padding: 5px 15px;

    position: absolute;

    z-index: 98;

    width: 220px;

Script diatas untuk membuat box atau tempat tooltip. Pada script diatas terdapat properti content, lalu apakah fungsinya?? Fungsi properti content adalah menyisipkan konten, konten dapat berupa file, string, maupun isi sebuat atribut dalam HTML. Dan dalam hal ini kita mengisi konten dengan isi dari atribut title. Untuk menambah cantik tooltip, kita tambahkan panah dengan sedikit tambahan CSS :

.tooltip:hover:before{

    border: solid;

    border-color: #333 transparent;

    border-width: 6px 6px 0 6px;

    bottom: 20px;

    content: "";

    left: 50%;

    position: absolute;

    z-index: 99;

Hasilnya :

Akhirnya selesai juga tooltipnya. Sobat juga dapat menggakannya pada atribut alt pada tag img. Silahkan sobat ubah sesuai selera sobat. Semoga bermanfaat . . . :-)

AJAX Javascript My SQL Pemrograman PHP

Membuat Rating Menggunakan PHP, AJAX dan My SQL

Unknown 11:48 9 Comments

Halo sobat ketemu lagi di blog saya. Kali ini saya akan membehas mengenai cara membuat rating sederhana dengan menggunakan PHP, Ajax, dan My SQL. Silahkan disimak baik-baik ya . . . J

Pertama-tama kita siapkan yang kita butuhkan. Untuk rating biasanya menggunakan simbol bintang, maka sobat cari gambar bintang. Untuk gambar ini sobat cari 3 jenis, yang pertama untuk menampilkan jumlah rating, kemudian yang kedua untuk pemberian rating dan yang terakhir untuk pemberian rating ketika di-hover.

Yang kedua buat database dengan struktur tabel sebagai berikut :

CREATE DATABASE IF NOT EXISTS `aplikasi_rating`;

USE `aplikasi_rating`;

CREATE TABLE IF NOT EXISTS `rating` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`nama` varchar(50) NOT NULL,

`rating` int(11) NOT NULL,

`voter` int(11) NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=latin1;

Setelah itu buat file baru di editor sobat, beri nama rating.php atau terserah sobat. Kemudian masukkan script berikut :

<html>

<head>

<script type="text/javascript">

var xmlhttp;

function buatRq(){

            if(window.ActiveXObject)

            {

                        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

            }

            else

            {

                        xmlhttp = new XMLHttpRequest();

            }

}

function tampilKan(){

            buatRq();

            xmlhttp.onreadystatechange = tanganiIni;

            xmlhttp.open("GET","rating.php",true);

            xmlhttp.send(null);

}

function beriRating(i,j){

            xmlhttp.onreadystatechange = tanganiIni;

            xmlhttp.open("GET","rating.php?rating="+i+"&id="+j,true);

            xmlhttp.send(null);

            alert("Terima Kasih");

}

function tanganiIni(){

            if(xmlhttp.readyState == 4){

                        if(xmlhttp.status == 200){

                                    document.getElementById("hasil").innerHTML = xmlhttp.responseText;

                                    setTimeout('tampilKan()',1000);

                        }

            }

}

function diatasRating(i,x){

            var l;

            for(l=1;l<=i;l++)

            {

                        document.getElementById(x+"_"+l).src = "ratingisi.png";

            }

}

function diatasRatin(i,x){

            var l;

            for(l=1;l<=i;l++)

            {

                        document.getElementById(x+"_"+l).src = "rating.png";

            }

}

</script>

<body onload="tampilKan();">

<div id="hasil"></div>

</body>

</html>

Script diatas befungsi untuk membuat request data ke server. Sekarang kita buat file untuk menampung request datanya. Scriptnya sebagai berikut :

<style>

.ratink{

width : 335px;

border : 1px solid black;

border-radius : 10px;

margin-bottom : 10px;

padding : 10px;

box-shadow : 0 0 4px 0;

}

.berirating{

overflow : hidden;

}

.tampil_rating{

overflow : hidden;

</style>

<?php

mysql_connect("localhost","root","");

mysql_select_db("aplikasi_rating");

if(isset($_GET['rating']) && isset($_GET['id']))

{

            $rating = $_GET['rating'];

            $id       = $_GET['id'];

            mysql_query("update rating set rating = rating + ".$rating.",voter = voter + 1 where id = '".$id."'");

}

$q = mysql_query("select * from rating");

while($d=mysql_fetch_array($q))

{





            $id       = $d['id'];

            $nama = $d['nama'];

            $rating = $d['rating'];

            $voter = $d['voter'];

            if($rating == 0 || $voter == 0)

            {

                        $rate = 0;

            }

            else

            {

                        $rata = $rating/$voter;

                        $rate = round($rata);

            }



            echo "<div class='ratink'>";

            echo "<div class='tampil_rating'>";

            echo "<b>".$nama."</b> mempunyai rating : ".$rate." ";

            if($rate == 1)

            {

                        echo "<img src='rating.jpg' width='25' />";

            }

            else if($rate == 2)

            {

                        for($i=1;$i<=2;$i++)

                                    echo "<img src='rating.jpg' width='25' />";

            }

            else if($rate == 3)

            {

                        for($i=1;$i<=3;$i++)

                                    echo "<img src='rating.jpg' width='25' />";

            }

            else if($rate == 4)

            {

                        for($i=1;$i<=4;$i++)

                                    echo "<img src='rating.jpg' width='25' />";

            }

            else if($rate == 5)

            {

                        for($i=1;$i<=5;$i++)

                                    echo "<img src='rating.jpg' width='25' />";

            }

            echo "</div>";





            echo "<div class='berirating'>";

            echo "Beri rating : ";

            for($i=1;$i<=5;$i++)

            {

                        ?>

                        <img id="<?php echo $id."_".$i; ?>" src="rating.png" width="25" onmouseover="diatasRating('<?php echo $i; ?>','<?php echo $id; ?>');" onmouseout="diatasRatin('<?php echo $i; ?>','<?php echo $id; ?>');" onclick="beriRating('<?php echo $i; ?>','<?php echo $id; ?>');" />

                        <?php

            }

            echo "</div></div>";

}

?>

Script diatas digunakan untuk handler data. Beri nama file diatas rating.php. Kemudian untuk gambarnya silahkan sobat tempatkan satu folder dengan dua script diatas. Untuk menjalankannya tinggal jalankan script rating.html. Hasilnya :