Cara Membuat Countdown / Waktu Hitung Mundur di Laravel

Framework adalah sebuah kerangka kerja dari pembuatan sebuah aplikasi. Framework ini berisi fungsi, plugin, atau sebagainya yang dikelompokkan ke dalam folder-folder yang menjadikannya lebih terstruktur dalam mengelola aplikasi atau program. Banyak sekali macam-macam dari framework ini, contohnya adalah Framework PHP yang salah satunya ialah Laravel.

Laravel merupakan salah satu pemrograman framework yang bersifat Open Source. Mudah digunakan menjadikannya salah satu andalan bagi pemula untuk mengembangkan sebuah web. Mungkin bagi kamu yang sering memakai Laravel sudah tidak asing lagi dengan kata artisan. Ya, semua yang dilakukan dengan Laravel ini menggunakan kode php artisan dalam memprosesnya.

Countdown merupakan waktu hitung mundur yang biasa digunakan untuk memberi deadline pada sesuatu. Untuk membuatnya, kita memerlukan kode JavaScript sehingga dapat berjalan dengan semestinya. Berikut adalah tutorial pembuatannya.
Disini penulis memberikan contoh penggunaan CountDown pada sebuah tugas.

Langkah:

1. Sebelum mulai membuat Countdown, buat dulu migration, model, controller, dan laravelcollective.

• Migration = buat_table_tugas   -> nama_tugas, end_date, timestamps
• Model = Tugas
• Controller = TugasController

2. Buka TugasController, isi dengan kode berikut:

<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;
use AppTugas;

class TugasController extends Controller
{
    public function tambah(){    
			return view('tugas.tambah', compact('tugas'));  } 

    public function lihat($id){
    	$tugas = Tugas::find($id); 
		return view('tugas.lihat')-> with(array('tugas'=>$tugas));
    }

    public function simpan(Request $input){
    	$tugas=new Tugas();
    	$tugas->nama_tugas=$input->nama_tugas;
    	$tugas->end_date=$input->end_date;
    	$tugas->save();
    	return redirect('tugas/tambah'); 
    }
}

• function tambah digunakan untuk menampilkan form tugas yang nantinya akan diisi.
• function lihat digunakan untuk menampilkan data berdasarkan id yang diberikan. Tugas::find($id) digunakan untuk mencari id dari model Tugas yang terhubung kedalam database lalu menampilkannya ke return.view(‘tugas.lihat’) dengan array tugas.
• function simpan digunakan untuk menyimpan data yang diinputkan.

3. Buat folder tugas pada folder resources – view. Lalu buat tampilan untuk tambah dan lihat tugas seperti pada gambar.

4. Buka tambah.blade.php, lalu isi dengan kode berikut:

 <div class="form-group"> 
   <label class="col-sm-2 control-label">Buat Tugas</label>  

   {!! Form::open(['url'=>'tugas/simpan','class'=>'form-horizontal', 'enctype' => 'multipart/form-data']) !!}        
   @if ($errors->any())     
   <div class="alert alert-danger">         
    <ul>             
     @foreach ($errors->all() as $error)                 
        <li>{{ $error }}</li>            
     @endforeach         
    </ul>     
  </div>  
  @endif 

 <div class="col-sm-5">   
  {!! Form::text('nama_tugas',null,['class'=>'formcontrol','placeholder'=>"nama_tugas"]) !!}  </div>
  <div class="col-sm-5">   
    {!! Form::text('end_date',null,['class'=>'formcontrol','placeholder'=>"mm/dd/yyyy"]) !!}  </div>

    <div class="form-group row mb-0">
      <div class="col-md-8 offset-md-4">
        <button type="submit" class="btn btn-primary">
          {{ __('Tambah') }}
        </button>
      </div>
    </div>
    {!! Form::close() !!}
  </div>

• Di dalam Form::open terdapat url yang mana url ini nantinya ketika ditekan tombol submit maka dia akan mengarahkan ke url tugas/simpan.
• Form::text digunakan untuk menginputkan sesuatu yang nantinya diproses ke controller.

5. Buka lihat.blade.php, lalu isi dengan kode berikut:

	
<table border="1">
	<tr>
		<td>
			{{ $tugas->nama_tugas }}
		</td>
	</tr>
	<tr>
		<td>
			<script>
				CountDownTimer('{{$tugas->created_at}}', 'countdown');
				function CountDownTimer(dt, id)
				{
					var end = new Date('{{$tugas->end_date}}');
					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;
						if (distance < 0) {

							clearInterval(timer);
							document.getElementById(id).innerHTML = '<b>TUGAS SUDAH BERAKHIR</b> ';
							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(id).innerHTML = days + 'days ';
						document.getElementById(id).innerHTML += hours + 'hrs ';
						document.getElementById(id).innerHTML += minutes + 'mins ';
						document.getElementById(id).innerHTML += seconds + 'secs';
						document.getElementById(id).innerHTML +='<h2>TUGAS BELUM BERAKHIR</h2>';
					}
					timer = setInterval(showRemaining, 1000);
				}
			</script>
			<div id="countdown"> 
			</td>
		</tr>
	</table>

• Pada function lihat tadi terdapat array(‘tugas’=>$tugas) yang mana akan digunakan untuk menampilkan nama_tugas, created_at, dan end_date yang tersimpan pada database.
• Untuk menampilkan CountDown, dibutuhkan JavaScript agar waktu dapat berkurang.
• Dilakukan perhitungan pada variable distance = end (berisi waktu berakhir) – now (waktu sekarang). Jika distance < 0 maka akan menampilkan TUGAS SUDAH BERAKHIR. Tapi jika belum berakhir, maka akan tampil tulisan TUGAS SUDAH BERAKHIR

6. Buka web.php yang terdapat pada folder routes, dan isi dengan kode berikut:

<?php


Route::get('/', function () {
    return view('welcome');
});

    	Route::get('tugas/tambah', 'TugasController@tambah');
    	Route::post('tugas/simpan', 'TugasController@simpan');
        Route::get('tugas/lihat/{tugas}', 'TugasController@lihat');

• File ini yang mendefinisikan semua url dengan controllernya. Jika hanya menampilkan, maka digunakan GET. Tapi jika menginputkan sesuatu, maka digunakan POST.

7. Selesai. Untuk membuat tugas, ketikkan pada broweser localhost:8000/tugas/tambah lalu isi sesuai keinginan.

8. Untuk melihat tugasnya, ketikkan pada browser localhost:8000/tugas/lihat/(id tugas).

Demikian tutorial cara membuat countdown / waktu hitung mundur di Laravel, semoga bermanfaat.