Background website kamu statis itu-itu saja ? Akan lebih keren
apabila background pada website kita berubah mengikuti perubahan waktu
bukan ? Sebagai contoh apabila pagi hari background kita menjadi gambar
matahari terbit, Sore hari background menjadi lebih orange, dan malam
menjadi lebih gelap. Kali ini kita akan coba membuat background dinamis
menggunakan CSS dan PHP.
Tanpa basa-basi kita langsung praktek saja. Pertama-tama buat sebuah file index.php (terserah anda)
<pre lang="php">
<html>
<head>
</head>
<body>
Konten di sini!
</body>
</html>
</pre>
Setelah body html telah kita buat, tambahkan script css di bawah ini tepat di antara pembuka dan penutup tag html head.
<pre lang="php">
<style type="text/css">
body
{
background-image: url("<?php echo $background; ?>");
}
</style>
</pre>
Apabila
kita melihat pada kode css di atas, kita akan menemukan sebuah script
PHP yang disisipkan ke dalam background-image. variable $background ini
akan kita berikan nilai sesuai background yang kita mau munculkan sesuai
dengan waktu yang kita tentukan.
Tambahkan script php di bawah ini tepat di atas
<style>
<pre lang="php">
<?php
$jamSekarang = date("H");
if($jamSekarang >= 6 && $jamSekarang <= 14)
{
$background = "images/pagi.jpg";
}
elseif($jamSekarang >= 15 && $jamSekarang <= 17)
{
$background = "images/sore.jpg";
}
elseif($jamSekarang >= 18 && $jamSekarang <= 24)
{
$background = "images/malam.jpg";
}
else
{
$background = "images/malam.jpg";
}
?>
</pre>
Pada
script php di atas, kita melakukan pengecekan jam pada saat halaman
kita diakses dan menyimpannya ke dalam variabel $jamSekarang. Setelah
itu kita memberikan kondisi jam sesuai dengan ke inginan kita. Else
akhir pada kondisi di atas adalah waktu subuh, atau waktu yang tidak
ditentukan pada kondisi if kita. Untuk waktu, kalian bisa menggunakan
time() jika kalian mau.
Mudah bukan ? Selamat mencoba!
0 comments:
Post a Comment