Tutorial Pemrograman

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:

  • 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:

  • 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:

  • 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:

  • 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.









Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Berlangganan tutorial Inwepo melalui email

Copyright © 2019 Inwepo - All Rights Reserved.

To Top