Cara Membuat Efek Bayangan dengan box-shadow

Assalamu'alaikum Warahmatullahi Wabarakatuh..
     Setelah beberapa artikel sebelumnya SkripKu sudah membahas tentang PHP dan SQL, maka pada artikel kali ini kita akan membahas tentang CSS. Oke, sesuai judul diatas kali ini kita akan mencoba mengupas tentang box-shadow, fitur box-shadow ini merupakan salah satu fitur baru yang ada di CSS3. Saat pertama kali dikeluarkan, untuk menggunakan fitur ini kita harus menyebutkan kode khusus seperti -webkit-box-shadow untuk Google Chrome, kemudian -mox-box-shadow untuk Firefox, dan kode-kode ribet lainnya. Tapi sekarang, Alhamdulillah hampir semua browser sudah mulai mendukung deklarasi tunggal untuk fitur box-shadow ini. Jadi kita cukup menuliskan box-shadow: bla bla bla bla saja dan akan mengeluarkan hasil yang sama baik di Google Chrome, Mozilla Firefox, dan browser-browser modern lainnya. Jadi seperti namanya, fungsi dari box-shadow ini adalah untuk memberikan efek bayangan kepada suatu objek di halaman web. Langsung saja, syntax box-shadow kurang lebih seperti ini:

box-shadow: h-offset v-offset blur-radius color;

Keterangan

1. h-offset
     Horizontal Offset: Jika nilainya positif maka bayangan akan berada di sebelah kanan, jika negatif maka bayangan akan berada disebelah kiri.
2. v-offset
     Vertical Offset: Jika nilainya positif maka bayangan akan berada dibawah, jika negatif maka bayangan akan berada diatas.
3. blur-radius
     Blur Radius: Jika nilainya nol maka bayangan akan seperti bayangan biasa, semakin besar nilainya maka akan semakin blur bayangannya.
4. color
     Warna: Warna bayangan, kita bisa mengisinya dengan menyebutkan nama warnanya langsung seperti: red, blue, green, dll. Kita juga bisa mengisinya dengan rgb() ataupun hexadecimal. Jika ingin mencari warna yang bagus, anda bisa menggunakan Tools Color Picker yang disediakan SkripKu disini.
Informasi:
Semua contoh disini menggunakan metode Internal CSS. Baca juga: Cara Memasang CSS kedalam HTML

Contoh

     Pada contoh dibawah kita akan mencoba membuat sebuah persegi dan memberinya efek bayangan dengan box-shadow dengan nilai h-offset: 5px sehingga bayangan akan berada 5px disebelah kanan kotak, v-offset: 5px sehingga bayangan akan berada 5px dibawah kotak, Blur Radius: 5px dan warna bayangan #4791D2 (biru).

Kode HTML-nya seperti ini:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>SkripKu - Mengenal box-shadow</title>
        <style>
            .persegi {
            width: 100px;
            height: 100px;
            border: 1px solid #4791D2;
            box-shadow: 5px 5px 5px #4791D2;
            }
        </style>
    </head>
    <body>
        <div class="persegi"></div>
    </body>
</html>

Multiple Shadow

     Kita juga bisa memberikan beberapa efek shadow kepada suatu elemen html dengan menggunakan koma (,). Seperti pada contoh dibawah kita akan membuat sebuah persegi dengan 4 bayangan yaitu hitam, merah, biru, dan hijau:
Kode HTML-nya:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>SkripKu - Mengenal box-shadow</title>
        <style>
            .kotak {
            width: 100px;
            height: 100px;
            box-shadow: 1px 1px 5px black,
            10px 10px 5px red,
            20px 20px 5px blue,
            30px 30px 5px green;
            }
        </style>
    </head>
    <body>
        <div class="kotak"></div>
    </body>
</html>
Oke, sekian tutorial kali ini.
Mohon maaf jika masih banyak kekurangan.
Terima kasih atas kunjungannya.
Wassalamu'alaikum Warahmatullahi Wabarakatuh.

Cara Membulatkan Bilangan Desimal di PHP

Assalamu'alaikum Warahmatullahi Wabarakatuh
     Sesuai judul diatas, kita akan membahas bagaimana cara membulatkan bilangan desimal di PHP. Oh iya sebagai catatan saja, kalau kita inget-inget pas SD mungkin bapak/ibu guru matematikan kita pernah bilang "bilangan desimal adalah bilangan yang memiliki angka di belakang koma" ya memang seperti itu, tapi secara notasi ilmiah (termasuk penulisan di PHP juga) bilangan desimal adalah bilangan yang mempunyai angka di belakang titik (.). Contohnya 8.9 maka dibaca "delapan koma sembilan". Jadi jangan heran jika nanti kita mencoba memasukan bilangan desimal tapi masih pake koma (,) seperti 8,9 atau 9,9 maka hasilnya tidak akan seperti yang kita inginkan. Oke kembali lagi ke pokok bahasan, untuk melakukan pembulatan PHP menyediakan beberapa function bawaan yaitu round(), ceil(), dan juga floor(). Nah apa sih perbedaan dari ketiga function tersebut? Kita bahas satu-satu yuk..

Pembulatan dengan round()

     Pembulatan dengan function ini adalah pembulatan seperti pada umumnya, yaitu jika nilai dibelakang koma-nya diatas 0.5 maka akan dibulatkan keatas, dan jika nilai di belakang komanya dibawah 0.49 maka akan dibulatkan kebawah. Sebagai contoh, jika 11.22 dibulatkan menggunakan round() maka akan menjadi 11 dan jika 6.7 dibulatkan dengan round() maka akan menjadi 7. Bisa dimengerti kan? Berikut contoh penggunaannya di PHP:

<?php
$bilangan1=11.22;
echo "Sebelum dibulatkan: " . $bilangan1 . ", setelah dibulatkan: " . round($bilangan1) . "<br>"; // Menampilkan 11
$bilangan2=6.7;
$bilangan2dibulatkan=round($bilangan2);
echo "Sebelum dibulatkan: " . $bilangan2 . ", setelah dibulatkan: " . $bilangan2dibulatkan;
?>
Maka hasilnya adalah:
 

Pembulatan dengan ceil()

     Ceil() adalah function pembulatan ke atas. Jika dalam function round() dilihat dulu angka dibelakang koma-nya, maka disini tanpa dilihat dulu langsung saja dibulatkan ke angka terdekat diatasnya. Sebagai contoh 1.2, 1.4, 1.5, 1.8, 1.9, 1.00001 akan sama-sama menghasilkan angka 2. Contoh penggunaannya:

<?php
$bilangan1=1.2;
$bilangan2=1.4;
$bilangan3=1.6;
$bilangan4=1.999;
$bilangan5=1.00001;
echo "Contoh penggunaan ceil():
";
// Semuanya akan menghasilkan angka 2 karena dibulatkan ke angka terdekat diatasnya.
echo $bilangan1 . " setelah dibulatkan adalah " . ceil($bilangan1) . "<br>";
echo $bilangan2 . " setelah dibulatkan adalah " . ceil($bilangan2) . "<br>";
echo $bilangan3 . " setelah dibulatkan adalah " . ceil($bilangan3) . "<br>";
echo $bilangan4 . " setelah dibulatkan adalah " . ceil($bilangan4) . "<br>";
echo $bilangan5 . " setelah dibulatkan adalah " . ceil($bilangan5) . "<br>";
?>
Maka hasilnya adalah:
 

Pembulatan dengan floor()

     Kebalikan dari ceil(), jika dalam ceil() berapapun angka dibelakang koma akan dibulatkan ke angka terdekat diatasnya, maka di function floor() ini akan dibulatkan ke angka terdekat dibawahnya. Contohnya seperti ini:

<?php
$bilangan1=1.2;
$bilangan2=1.4;
$bilangan3=1.6;
$bilangan4=1.999;
$bilangan5=1.00001;
echo "Contoh penggunaan floor():<br>";
// Semuanya akan menghasilkan angka 1 karena dibulatkan ke angka terdekat dibawahnya.
echo $bilangan1 . " setelah dibulatkan adalah " . floor($bilangan1) . "<br>";
echo $bilangan2 . " setelah dibulatkan adalah " . floor($bilangan2) . "<br>";
echo $bilangan3 . " setelah dibulatkan adalah " . floor($bilangan3) . "<br>";
echo $bilangan4 . " setelah dibulatkan adalah " . floor($bilangan4) . "<br>";
echo $bilangan5 . " setelah dibulatkan adalah " . floor($bilangan5) . "<br>";
?>
Maka hasilnya adalah:
 

Oke, sepertinya sekian saja tutorial kali ini. Jika masih ada yang belum dimengerti silahkan bertanya di kolom komentar.
Terima kasih atas kunjungannya, mohon maaf bila banyak kekurangan.
Wassalamu'alaikum Warahmatullahi Wabarakatuh..

Tutorial SQL 3: Membuat Tabel

Assalamu'alaikum Warahmatullahi Wabarakatuh
     Setelah beberapa artikel sebelumnya SkripKu Dotkom pernah membahas perintah SQL untuk Membuat Database, kali ini kita akan membahas bagaimana cara membuat tabel dengan perintah SQL. Oke, sedikit intro aja dulu. Jadi, didalam database itu berisi banyak tabel. Kalau diibaratkan database itu sebuah lemari dan tabel itu adalah laci. Contohnya misalkan disebuah sekolah terdapat lemari, isinya itu ada laci data siswa, ada laci data guru, dll. Begitupun didalam database, kalau misalkan kita punya sebuah database bernama smk_muhammadiyah maka idealnya didalamnya itu ada tabel_siswa, tabel_guru, tabel_jadwal_pelajaran, tabel_inventaris_sekolah, dll. Yaa kurang lebih seperti itu lah, kalau misalkan masih belum jelas, silahkan nyari-nyari referensi lain di Mbah Google.
     Oke langsung aja, perintah SQL untuk membuat tabel adalah sebagai berikut:

CREATE TABLE namatabel
(
namafield1 tipedata(lebardata),
namafield2 tipedata(lebardata),
namafield3 tipedata(lebardata),
namafield4 tipedata(lebardata),
namafield5 tipedata(lebardata),
namafield-n tipedata(lebardata)
);
  • Field: Nama lain dari kolom. Jika misalkan kita membuat tabel_siswa, maka fieldnya kurang lebih adalah nis, nama, alamat, jenis_kelamin, dll.
  • Tipe Data: Adalah jenis datanya (misal: integer untuk menyimpan bilangan real, varchar untuk menyimpan teks, date untuk menyimpan tanggal, dll.), untuk lebih lengkapnya silahkan baca disini.
  • Lebar Data: Adalah jumlah maksimum karakter yang bisa ditampung.

Contoh Pembuatan Tabel

     Sebelum mencoba perintah dibawah, pastikan sebelumnya anda sudah membuat database terlebih dahulu. Jika belum, silahkan ikuti tutorialnya disini. Pada contoh dibawah kita akan mencoba membuat tabel siswa dengan field nis, nama, jurusan, dan jenis_kelamin. Silahkan perhatikan, amati dan coba contoh dibawah karena ini akan digunakan untuk praktek di tutorial selanjutnya.

CREATE TABLE siswa
(
nis INT(6),
nama VARCHAR(50),
jurusan VARCHAR(5),
jenis_kelamin VARCHAR(1)
);
Jika perintah diatas berhasil dijalankan di phpMyAdmin, maka nama tabel akan langsung muncul disebelah kiri. Di PC saya, hasilnya adalah seperti ini:

Oke sekian tutorial kali ini, jika ada pertanyaan silahkan layangkan di kolom komentar.
Terima kasih atas kunjungannya, mohon maaf jika masih banyak kekurangan.
Wassalamu'alaikum Warahmatullahi Wabarakatuh..

HTML

More »

PHP

More »