.png)
Cara Menampilkan Jam dengan PHP dan AJAX
Ok langsung kita praktekan pertama buat dulu folder ajax di htdoc jika kalian menggunakan xampp atau di folder www jika anda menggunakan wamp lalu buat file jam.php isinya seperti berikut :
<?php
header('Access-Control-Allow-Origin: *');
date_default_timezone_set("Asia/Jakarta"); // untuk mengubah zona waktu
$arrDay = array("Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu");
$day = date("w"); //0-6 of day
echo "Sekarang adalah : <b>" . $arrDay[$day]."</b><br>";
echo "" . date("d/m/Y") . "<br>";
echo " " . date("H:i:s"); // untuk menampilkan jam
?>
kemudian buat file autoload.html isinya seperti berikut:
<html>
<head>
<style>
body {
background: url("bg.jpg") 30% center no-repeat;
}
#response {
margin: 250px auto;
width: 400px;
padding: 10px;
border: none;
background: rgba(0,0,0,0.5);
color: #fff;
font-size: 30px;
font-family: verdana;
}
</style>
<script src="jquery.js"></script>
<script>
var refreshId = setInterval(function(){
$('#response').load('jam.php');
}, 1000);
</script>
</head>
<body>
<div id="response">
</div>
</body>
</html>
pada kode html diatas saya menggunakan background gambar, gambarnya bisa kalian ubah sesuai gambar yang kalian miliki
kemudian karena AJAX nya menggunakan jquery silakan anda download file jquery terbaru di jquery.org kemudian file jquery yang telah anda download ganti namanya menjadi jquery.js dan pindahkan ke folder ajax tadi
setelah itu silkan di tes di browser dengan alamat http://localhost/ajax/autoload.html jika berhasil akan tampil seperti gambar diatas. Jika ingin mempercantik font jam nya bisa anda tambahkan google font. terimakasih semoga bermanfaat
0 komentar :