Berbagi Ilmu: CSS

Sunday, 17 January 2016

Monday, 2 June 2014

AJAX CSS HTML Javascript My SQL Pemrograman PHP

Aplikasi PHP, MySQL, AJAX : Sistem Inventaris Barang

Unknown 18:49 14 Comments

Aplikasi PHP, MySQL, AJAX : Sistem Inventaris Barang

Screen Shot 1

Screen Shot 2

Screen Shot 3

Screen Shot 4

Saya kali ini akan men-share aplikasi inventaris sederhana untuk mencatat atau memanajemen barang. Aplikasi ini saya buat dengan menggunakan PHP, AJAX, dan MySQL. Mohon maaf mungkin kurang menarik, maklum baru belajar, hehehe :-)

NOTE : Aplikasi ini dibangun dengan XAMPP versi 1.8, didalamnya masih menggunakan library mysql,
jadi jika dijalankan di PHP versi 7 akan error karena sudah tidak didukung lagi (baca perubahan di PHP 7).
Jika ada error yang berhubungan dengan URL not found atau file not found, kemungkinan itu error karena HTACCESS-nya, jadi bisa googling untuk mengaktifkan mod rewrite di webserver atau baca artikel saya Mengenal HTACCESS, Tutorial HTACCESS, Tips HTACCESS.
Download di link dibawah ini
Download 1
Download 2
Download 3

Download 4

Password : 1nv3nt4r1s

Harap laporkan jika link mati :-)

Tuesday, 8 April 2014

CSS HTML Pemrograman

Mempercantik Tooltip dengan CSS3

Unknown 12:34 Leave a Reply

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 . . . :-)