Membuat Countdown Menggunakan CodeIgniter dan Javascript


Pada kesempatan kali ini saya akan share tentang cara membuat countdown time menggunakan Framework Codeigniter, sebenarnya bisa saja hanya menggunakan Javascript tapi agar lebih dinamis saya menggunakan Codeigniter untuk mengatur tanggal dan waktunya.

Bagi kalian yang bingung sebenarnya ini buat apa, saya tampilkan dulu screenshootnya di bawah ini:
cara membuat countdown time
Countdown time
Kurang lebih gambarannya seperti itu, untuk langkah-langkah membuatnya silahkan ikuti langkah-langkah di bawah ini:
Sebelum lanjut, buatlah satu tabel untuk menampung tanggalnya, dengan nama countdowntime:
cara membuat countdowntime tabel pada database
tabel countdowntime

1. Seperti biasa siapkan file CodeIgniter dan Framework CSS (Optional disini saya memakai Materialize).
2. Silahkan config dulu CodeIgniternya, dan langkah selanjutnya buat lah view yang berisi form untuk insert tanggal dan waktu. Tampilan punya saya seperti di bawah ini:
view insert tanggal dan waktu
Untuk sintaksnya saya kasi lengkapnya langsung save dengan nama v_countdown.php

<!DOCTYPE html>
<html>
<head>
<title>CountDown</title>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="<?php echo base_url();?>/assets/materialize/css/materialize.min.css"  media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/chingyawhao/materialize-clockpicker/master/dist/css/materialize.clockpicker.css"/>
</head>
<body>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>/assets/materialize/js/materialize.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/chingyawhao/materialize-clockpicker/master/dist/js/materialize.clockpicker.js"></script>

<div class="container">
<div class="row">
<div class="card">
<div class="card-panel">
<?php echo form_open('countdown/time');?>
<div class="row">
<div class="col s6 offset-s2">
<label for="start">Start</label>
<input type="date" class="datepicker" name="start" id="start">
</div>
<div class="col s2">
<label for="timepicker_ampm_dark">Jam</label>
<input id="timepicker_ampm_dark" class="timepicker" type="time" name="waktu_start">
</div>

<div class="col s6 offset-s3 center">
<button class="btn waves-effect waves-light #1976d2 blue darken-2 submit" type="submit">Submit</button>
<a href="<?php echo site_url('countdown/lihat_countdown')?>" class="btn waves-effect waves-light #1976d2 blue darken-2">Lihat</a>
</div>
</div>
<?php echo form_close();?>
</div>
</div>
</div>
</div>

<script type="text/javascript">
$('.datepicker').pickadate({
    selectMonths: true, // Creates a dropdown to control month
    selectYears: 15,// Creates a dropdown of 15 years to control year
  });
</script>
<script type="text/javascript">
$('.timepicker').pickatime({
    default: 'now',
    timeFormat: 'HH:mm:ss',
    twelvehour: false, // change to 12 hour AM/PM clock from 24 hour
    donetext: 'OK',
  autoclose: false,
  vibrate: true // vibrate the device when dragging clock hand
});
</script>
</body>
</html>

3. Langkah selanjunya buatlah controller dengan nama countdown.php dan tambahkan sintaks untuk menampung nilai tanggal dan waktu tersebut.
public function index()
{
$this->load->view('v_countdown');
}

public function time(){
$tanggal_start =$this->input->post('start');
$waktu_start = $this->input->post('waktu_start');
$s = strtotime("$waktu_start $tanggal_start");
$start =array('waktu'=>date('Y:m:d H:i:s', $s));
$result = $this->mcountdown->time($start);
if($result == true){
redirect(site_url('countdown/lihat_countdown'));
}
else{
redirect(site_url());
}
}

Penjelasannya:

  • Kita menampung nilai tanggal dan waktu kemudian kita gabung jadi satu dengan fungsi strtotime.
  • Kemudian kita insert ke dalam tabel, fungsi penggabungannya karena kita menggunakan timestampt format pada tabel.
4. Di function time jika berhasil maka akan redirect ke function lihat_contdown maka dari itu, kita perlu menambahkan function countdown di bawahnya.
public function lihat_countdown(){
$result['timer'] = $this->mcountdown->select_time();
$this->load->view('v_timer', $result);
}

5. Langkah selanjunya buatlah model dengan nama mcountdown dan tambahkan sintaks seperti di bawah ini:
public function time($start)
{
$this->db->insert('countdowntime', $start);
if($this->db->affected_rows()>0){
return true;
}else{
return false;
}
}

public function select_time(){
$this->db->select('*');
$this->db->from('countdowntime');
$query = $this->db->get();
if($query->num_rows()>0){
return $query->row();
}
}
6. Langkah terakhir kita tinggal buatkan view lagi satu untuk menampilkan waktunya, berikut ini sintaksnya dan save dengan nama v_timer.
<!DOCTYPE html>
<html>
<head>
<title>CountDown</title>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="<?php echo base_url();?>/assets/materialize/css/materialize.min.css"  media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/chingyawhao/materialize-clockpicker/master/dist/css/materialize.clockpicker.css"/>
</head>
<body>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>/assets/materialize/js/materialize.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/chingyawhao/materialize-clockpicker/master/dist/js/materialize.clockpicker.js"></script>

<div class="container">
<div class="row"  style="margin-top: 80px;">
<div class="col s12">
<h2 class="center blue-text">MaInBack</h2>
</div>
</div>
<div class="row">
<div class="col s2 offset-s2">
<div class="card">
<div class="card-content" style="height: 90px;"><h5 id="hari" class="center"></h5></div>
</div>
</div>
<div class="col s2">
<div class="card">
<div class="card-content"  style="height: 90px;"><h5 id="jam" class="center"></h5></div>
</div>
</div>
<div class="col s2">
<div class="card">
<div class="card-content"  style="height: 90px;"><h5 id="menit" class="center"></h5></div>
</div>
</div>
<div class="col s2">
<div class="card">
<div class="card-content"  style="height: 90px;"><h5 id="detik" class="center"></h5></div>
</div>
</div>
</div>
</div>
<script>

    CountDownTimer("<?php echo $timer->waktu;?>", 'hari', 'jam', 'menit', 'detik');
    function CountDownTimer(dt, id1, id2, id3,id4)
    {
        var end = new Date(dt);

        var _second = 1000;
        var _minute = _second * 60;
        var _hour = _minute * 60;
        var _day = _hour * 24;
        var timer;

        function showRemaining() {
            var now = new Date();
            var distance = end - now;
            var distance1 = now - end;
            if(distance1 > 0){
                clearInterval(timer);
                return;
            }
            var days = Math.floor(distance / _day);
            var hours = Math.floor((distance % _day) / _hour);
            var minutes = Math.floor((distance % _hour) / _minute);
            var seconds = Math.floor((distance % _minute) / _second);

            document.getElementById(id1).innerHTML = days + ' Hari';
            document.getElementById(id2).innerHTML = hours + ' Jam';
            document.getElementById(id3).innerHTML = minutes + ' Menit';
            document.getElementById(id4).innerHTML = seconds + ' Detik';
        }

        timer = setInterval(showRemaining, 1000);
    }

</script>
</body>
</html>

Penjelasan:

  • Yang perlu diperhatikan adalah pada bagian JavaScriptnya, pada CountDownTimer disana kita masukkan tanggal dari database dan id untuk kita tampilkan custom pada halaman html.
  • Untuk yang lain silahkan pahami sendiri saya rasa itu kebanyakan basic html, css dan javascript.
Sekian tutorialnya semoga bermanfaat jangan lupa komen dan share.
Baca juga artikel terkait:

Artikel Terkait

6 komentar

ijin bookmark gan, mau ane coba soalnya keren banget

Wih makasih bro sangat menarik

mas pada saat timer habis lalu menampilkan data dari table , bisa atau tidak ?


EmoticonEmoticon