Belajar Web Programming PHP, HTML, MySQL dan Tutorial

Membuat Aplikasi Web Live Date And Time Dengan HTML dan Js

Sebuah aplikasi web dapat dikembangkan menjadi lebih interaktif lagi dengan menggunakan javascript. Dalam hal ini kita mencoba membuat sebuah fitur penunjung waktu dan tanggal secara live atau berjalan otomatis. Fitur ini dapat diwujudkan dengan beberapa fungsi dari javascript yang akan kita kerjakan sesaat lagi. Aplikasi ini hanya terdiri dari 2 buah file yaitu file datetime.js dan file index.php. secara sederhana sistem akan menampilkan waktu dan tanggal yang berjalan otomatis yang dapat anda kembangkan lagi sesuai dengan kebutuhan. Mari kita mulai mengerjakannya.

Membuat file: datetime.js
function date_time(id)
{

        date    = new Date;
        tahun   = date.getFullYear();
        bulan   = date.getMonth();
        tanggal = date.getDate();
        hari    = date.getDay();

        namabulan = new Array('Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember');
        namahari  = new Array('Minggu','Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu');

        h = date.getHours();
        if(h<10) { h = "0"+h; }
        m = date.getMinutes();
        if(m<10) { m = "0"+m; }
        s = date.getSeconds();
        if(s<10) { s = "0"+s; }

        //susun dengan format baru
        result = namahari[hari]+', '+tanggal+' '+namabulan[bulan]+' '+tahun+' / '+h+':'+m+':'+s;
        document.getElementById(id).innerHTML = result;
        setTimeout('date_time("'+id+'");','1000');
        return true;
}

Baris 4 - 8 adalah pemisahan tahun, bulan, tanggal, dan hari dari fungsi javascript dengan parameter masing-masing. disana kita bisa melihat bahwa object Date memiliki function getFullYear() untuk mendapatkan nilai Tahun, getMonth() untuk mendapatkan nilai bulan, getDate() untuk mendapatkan nilai tanggal, dan getDay() untuk mendapatkan nilai hari.

apa bedanya getDate() dan getDay()? tentu berbeda yang satu untuk mendapatkan tanggal dan yang satu untuk hari, ya seperti hari Minggu sampai sabtu yang akan kita konversi kemudian, dalam hal ini getDay() memiliki nilai dari 0 - 6

Baris 10 dan 11 digunakan untuk membuat array dari bulan dan hari dalam bahasa Indonesia, ini bertujuan untuk lebih mudah dipahami pengguna yang berada di Indonesia mengenai hari dan bulan apa saat ini.

Baris 13 - 18 digunakan untuk melakukan format waktu, yaitu jam, menit dan detik. disana terdapat suatu kondisi dimana jika jam atau menit atau detik nya kurang dari 10 maka akan di tambahkan angka nol di depannya. misal jam 9 maka akan menjadi 09

Baris 21 digunakan untuk menyusun format tampilan yang akan dimunculkan, jadi kita bisa menyusunnya sesuai dengan keinginan. pada contoh tersebut kita menyusunnya dengan urutan nama hari, tanggal bulan tahun / jam:menit:detik

Baris 22 digunakan untuk memberikan output dimana suatu tag html dengan id tertentu maka akan dikonversi outputnya menjadi live date and time

Baris 23 digunakan untuk memberi delay sebanyak 1000milisecond atau 1 detik jadi jam akan berjalan setiap detiknya.

apabila kode telah diketik dengan lengkap maka kita akan melanjutkan ke file index.php

Membuat file: index.php

<!DOCTYPE html>
<html>
<head>
 <title>Aplikasi Live Date and Time</title>
 <style>
 body {
  font-size: 12px;
  font-family: verdana;
 }
 a { text-decoration: none; color: blue; }
 a:hover { text-decoration: underline; }
 </style>
</head>
<body>
<h1>Aplikasi Web Dengan Live Date And Time</h1>
<hr>
<div style="float: left;margin-bottom: 5px;">
 <a href="index.php">Home</a> | 
 <a href="index.php#">About</a> |
</div>
<div style="float: right;margin-bottom: 5px;">
 <span id="date_time"></span>
</div>
<div style="clear: both;">
<hr>
<div style="height: 200px;">
Welcome to mysite
</div>
<hr>
Copyright &copy;2020 - belajarwebpedia.com
</body>
<script type="text/javascript" src="datetime.js"></script>
<script type="text/javascript">window.onload = date_time('date_time');</script>
</html>

Kode diatas adalah kode index.php yang dapat kalian ketik dengan teliti dan terstruktur. Bagian penting ada di baris 22 yaitu id='datetime' hal ini dikarenakan merujuk pada kode dibaris 33 yaitu date_time('date_time'). jadi untuk yang di dalam petik, kita bisa menggantinya dengan kata-kata yang lain selama baris 22 dan 33 sinkron maka fitur live date and time akan berjalan dengan normal.

berikut adalah output dari kode diatas

Bagaimana? tidak terlalu susah bukan? silahkan dicoba dan dapat dikembangkan sesuai kebutuhan ya.
Labels: HTML, javascript, Tutorial

Terima kasih telah membaca Membuat Aplikasi Web Live Date And Time Dengan HTML dan Js. Bila bermanfaat boleh di share yah :)

0 Comment for "Membuat Aplikasi Web Live Date And Time Dengan HTML dan Js"

Back To Top