├── assets
    ├── img
    │   └── favicon.ico
    ├── audio
    │   └── tingtung.mp3
    └── css
    │   └── style.css
├── LICENSE.md
├── config
    └── database.php
├── pages
    ├── nomor
    │   ├── get_antrian.php
    │   ├── insert.php
    │   └── index.php
    └── panggilan
    │   ├── get_jumlah_antrian.php
    │   ├── get_sisa_antrian.php
    │   ├── update.php
    │   ├── get_antrian_sekarang.php
    │   ├── get_antrian_selanjutnya.php
    │   ├── get_antrian.php
    │   └── index.php
├── database
    └── db_antrian.sql
├── README.md
└── index.php


/assets/img/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pustakakoding/aplikasi-antrian-berbasis-web/HEAD/assets/img/favicon.ico


--------------------------------------------------------------------------------
/assets/audio/tingtung.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pustakakoding/aplikasi-antrian-berbasis-web/HEAD/assets/audio/tingtung.mp3


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | # Copyright (c) 2021 - Pustaka Koding - Indra Styawantoro. All rights reserved.
 2 | 
 3 | 
 4 | # Permissions
 5 | 
 6 | - Private use
 7 | - Modification
 8 | - Distribution
 9 | 
10 | 
11 | # Limitations
12 | 
13 | - Commercial use
14 | - Liability
15 | - Warranty
16 | 


--------------------------------------------------------------------------------
/config/database.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | // deklarasi parameter koneksi database
 3 | $host     = "localhost";                // server database, default “localhost” atau “127.0.0.1”
 4 | $username = "root";                     // username database, default “root”
 5 | $password = "";                         // password database, default kosong
 6 | $database = "db_antrian";               // memilih database yang akan digunakan
 7 | 
 8 | // buat koneksi database
 9 | $mysqli = mysqli_connect($host, $username, $password, $database);
10 | 
11 | // cek koneksi
12 | // jika koneksi gagal 
13 | if (!$mysqli) {
14 |     // tampilkan pesan gagal koneksi
15 |     die('Koneksi Database Gagal : ' . mysqli_connect_error());
16 | }
17 | 


--------------------------------------------------------------------------------
/pages/nomor/get_antrian.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | // pengecekan ajax request untuk mencegah direct access file, agar file tidak bisa diakses secara langsung dari browser
 3 | // jika ada ajax request
 4 | if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest')) {
 5 |     // panggil file "database.php" untuk koneksi ke database
 6 |     require_once "../../config/database.php";
 7 | 
 8 |     // ambil tanggal sekarang
 9 |     $tanggal = gmdate("Y-m-d", time() + 60 * 60 * 7);
10 | 
11 |     // sql statement untuk menampilkan jumlah data dari tabel "tbl_antrian" berdasarkan "tanggal"
12 |     $query = mysqli_query($mysqli, "SELECT count(id) as jumlah FROM tbl_antrian WHERE tanggal='$tanggal'")
13 |                                     or die('Ada kesalahan pada query tampil data : ' . mysqli_error($mysqli));
14 |     // ambil data hasil query
15 |     $data = mysqli_fetch_assoc($query);
16 |     // buat variabel untuk menampilkan data
17 |     $jumlah_antrian = $data['jumlah'];
18 | 
19 |     // tampilkan data
20 |     echo number_format($jumlah_antrian, 0, '', '.');
21 | }
22 | 


--------------------------------------------------------------------------------
/pages/panggilan/get_jumlah_antrian.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | // pengecekan ajax request untuk mencegah direct access file, agar file tidak bisa diakses secara langsung dari browser
 3 | // jika ada ajax request
 4 | if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest')) {
 5 |     // panggil file "database.php" untuk koneksi ke database
 6 |     require_once "../../config/database.php";
 7 | 
 8 |     // ambil tanggal sekarang
 9 |     $tanggal = gmdate("Y-m-d", time() + 60 * 60 * 7);
10 | 
11 |     // sql statement untuk menampilkan jumlah data dari tabel "tbl_antrian" berdasarkan "tanggal"
12 |     $query = mysqli_query($mysqli, "SELECT count(id) as jumlah FROM tbl_antrian WHERE tanggal='$tanggal'")
13 |                                     or die('Ada kesalahan pada query tampil data : ' . mysqli_error($mysqli));
14 |     // ambil data hasil query
15 |     $data = mysqli_fetch_assoc($query);
16 |     // buat variabel untuk menampilkan data
17 |     $jumlah_antrian = $data['jumlah'];
18 | 
19 |     // tampilkan data
20 |     echo number_format($jumlah_antrian, 0, '', '.');
21 | }
22 | 


--------------------------------------------------------------------------------
/pages/panggilan/get_sisa_antrian.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | // pengecekan ajax request untuk mencegah direct access file, agar file tidak bisa diakses secara langsung dari browser
 3 | // jika ada ajax request
 4 | if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest')) {
 5 |     // panggil file "database.php" untuk koneksi ke database
 6 |     require_once "../../config/database.php";
 7 | 
 8 |     // ambil tanggal sekarang
 9 |     $tanggal = gmdate("Y-m-d", time() + 60 * 60 * 7);
10 | 
11 |     // sql statement untuk menampilkan jumlah data dari tabel "tbl_antrian" berdasarkan "tanggal" dan "status = 0"
12 |     $query = mysqli_query($mysqli, "SELECT count(id) as jumlah FROM tbl_antrian 
13 |                                     WHERE tanggal='$tanggal' AND status='0'")
14 |                                     or die('Ada kesalahan pada query tampil data : ' . mysqli_error($mysqli));
15 |     // ambil data hasil query
16 |     $data = mysqli_fetch_assoc($query);
17 |     // buat variabel untuk menampilkan data
18 |     $sisa_antrian = $data['jumlah'];
19 | 
20 |     // tampilkan data
21 |     echo number_format($sisa_antrian, 0, '', '.');
22 | }
23 | 


--------------------------------------------------------------------------------
/pages/panggilan/update.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | // pengecekan ajax request untuk mencegah direct access file, agar file tidak bisa diakses secara langsung dari browser
 3 | // jika ada ajax request
 4 | if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest')) {
 5 |     // panggil file "database.php" untuk koneksi ke database
 6 |     require_once "../../config/database.php";
 7 | 
 8 |     // mengecek data post dari ajax
 9 |     if (isset($_POST['id'])) {
10 |         // ambil data hasil post dari ajax
11 |         $id = mysqli_real_escape_string($mysqli, $_POST['id']);
12 |         // tentukan nilai status
13 |         $status = "1";
14 |         // ambil tanggal dan waktu update data
15 |         $updated_date = gmdate("Y-m-d H:i:s", time() + 60 * 60 * 7);
16 | 
17 |         // sql statement untuk update data di tabel "tbl_antrian" berdasarkan "id"
18 |         $update = mysqli_query($mysqli, "UPDATE tbl_antrian
19 |                                         SET status='$status', updated_date='$updated_date'
20 |                                         WHERE id='$id'")
21 |                                         or die('Ada kesalahan pada query update : ' . mysqli_error($mysqli));
22 |     }
23 | }
24 | 


--------------------------------------------------------------------------------
/pages/panggilan/get_antrian_sekarang.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | // pengecekan ajax request untuk mencegah direct access file, agar file tidak bisa diakses secara langsung dari browser
 3 | // jika ada ajax request
 4 | if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest')) {
 5 |     // panggil file "database.php" untuk koneksi ke database
 6 |     require_once "../../config/database.php";
 7 | 
 8 |     // ambil tanggal sekarang
 9 |     $tanggal = gmdate("Y-m-d", time() + 60 * 60 * 7);
10 | 
11 |     // sql statement untuk menampilkan data "no_antrian" dari tabel "tbl_antrian" berdasarkan "tanggal" dan "status = 1"
12 |     $query = mysqli_query($mysqli, "SELECT no_antrian FROM tbl_antrian 
13 |                                     WHERE tanggal='$tanggal' AND status='1' 
14 |                                     ORDER BY updated_date DESC LIMIT 1")
15 |                                     or die('Ada kesalahan pada query tampil data : ' . mysqli_error($mysqli));
16 |     // ambil jumlah baris data hasil query
17 |     $rows = mysqli_num_rows($query);
18 | 
19 |     // cek hasil query
20 |     // jika data "no_antrian" ada
21 |     if ($rows <> 0) {
22 |         // ambil data hasil query
23 |         $data = mysqli_fetch_assoc($query);
24 |         // buat variabel untuk menampilkan data
25 |         $no_antrian = $data['no_antrian'];
26 | 
27 |         // tampilkan data
28 |         echo number_format($no_antrian, 0, '', '.');
29 |     }
30 |     // jika data "no_antrian" tidak ada
31 |     else {
32 |         // tampilkan "-"
33 |         echo "-";
34 |     }
35 | }
36 | 


--------------------------------------------------------------------------------
/pages/panggilan/get_antrian_selanjutnya.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | // pengecekan ajax request untuk mencegah direct access file, agar file tidak bisa diakses secara langsung dari browser
 3 | // jika ada ajax request
 4 | if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest')) {
 5 |     // panggil file "database.php" untuk koneksi ke database
 6 |     require_once "../../config/database.php";
 7 | 
 8 |     // ambil tanggal sekarang
 9 |     $tanggal = gmdate("Y-m-d", time() + 60 * 60 * 7);
10 | 
11 |     // sql statement untuk menampilkan data "no_antrian" dari tabel "tbl_antrian" berdasarkan "tanggal" dan "status = 0"
12 |     $query = mysqli_query($mysqli, "SELECT no_antrian FROM tbl_antrian 
13 |                                     WHERE tanggal='$tanggal' AND status='0' 
14 |                                     ORDER BY no_antrian ASC LIMIT 1")
15 |                                     or die('Ada kesalahan pada query tampil data : ' . mysqli_error($mysqli));
16 |     // ambil jumlah baris data hasil query
17 |     $rows = mysqli_num_rows($query);
18 | 
19 |     // cek hasil query
20 |     // jika data "no_antrian" ada
21 |     if ($rows <> 0) {
22 |         // ambil data hasil query
23 |         $data = mysqli_fetch_assoc($query);
24 |         // buat variabel untuk menampilkan data
25 |         $no_antrian = $data['no_antrian'];
26 | 
27 |         // tampilkan data
28 |         echo number_format($no_antrian, 0, '', '.');
29 |     }
30 |     // jika data "no_antrian" tidak ada
31 |     else {
32 |         // tampilkan "-"
33 |         echo "-";
34 |     }
35 | }
36 | 


--------------------------------------------------------------------------------
/database/db_antrian.sql:
--------------------------------------------------------------------------------
 1 | -- phpMyAdmin SQL Dump
 2 | -- version 5.1.1
 3 | -- https://www.phpmyadmin.net/
 4 | --
 5 | -- Host: localhost:3306
 6 | -- Generation Time: Aug 02, 2021 at 01:42 AM
 7 | -- Server version: 5.7.34
 8 | -- PHP Version: 8.0.8
 9 | 
10 | SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
11 | START TRANSACTION;
12 | SET time_zone = "+00:00";
13 | 
14 | 
15 | /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
16 | /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
17 | /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
18 | /*!40101 SET NAMES utf8mb4 */;
19 | 
20 | --
21 | -- Database: `db_antrian`
22 | --
23 | 
24 | -- --------------------------------------------------------
25 | 
26 | --
27 | -- Table structure for table `tbl_antrian`
28 | --
29 | 
30 | CREATE TABLE `tbl_antrian` (
31 |   `id` bigint(20) NOT NULL,
32 |   `tanggal` date NOT NULL,
33 |   `no_antrian` smallint(6) NOT NULL,
34 |   `status` enum('1','0') NOT NULL DEFAULT '0',
35 |   `updated_date` datetime DEFAULT NULL
36 | ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
37 | 
38 | --
39 | -- Indexes for dumped tables
40 | --
41 | 
42 | --
43 | -- Indexes for table `tbl_antrian`
44 | --
45 | ALTER TABLE `tbl_antrian`
46 |   ADD PRIMARY KEY (`id`);
47 | 
48 | --
49 | -- AUTO_INCREMENT for dumped tables
50 | --
51 | 
52 | --
53 | -- AUTO_INCREMENT for table `tbl_antrian`
54 | --
55 | ALTER TABLE `tbl_antrian`
56 |   MODIFY `id` bigint(20) NOT NULL AUTO_INCREMENT;
57 | COMMIT;
58 | 
59 | /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
60 | /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
61 | /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
62 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Aplikasi Antrian Berbasis Web
 2 | 
 3 | ![pustakakoding-aplikasi-antrian-berbasis-web](https://user-images.githubusercontent.com/88012593/127802854-a89aeb33-34e1-47ad-8bbf-6a8cecc45ef9.jpg)
 4 | 
 5 | Aplikasi Antrian merupakan sistem manajemen yang digunakan untuk mengelola antrian pengunjung pada suatu perusahaan atau instansi. Aplikasi antrian dapat digunakan sebagai sarana untuk mencapai kinerja efektif dan efisien bagi perusahaan atau instansi dalam melayani pengunjung.
 6 | 
 7 | **Aplikasi ini dibangun dengan :**
 8 | - Menggunakan bahasa pemrograman **PHP 8**.
 9 | -	Menggunakan database management system **MySQL** atau **MariaDB**.
10 | -	Menggunakan **MySQLi Extension** untuk berkomunikasi dengan database.
11 | -	Menggunakan framework CSS **Bootstrap 5** untuk membuat desain tampilan aplikasi.
12 | -	Menggunakan **jQuery AJAX** untuk proses CRUD.
13 | -	Menggunakan API teks berbicara dalam bahasa Indonesia dari **ResponsiveVoice.JS** untuk suara panggilan antrian.
14 | 
15 | # Fitur Apilkasi
16 | Aplikasi Antrian ini terdiri dari 2 interface, yaitu **Nomor Antrian**, dan **Panggilan Antrian**.
17 | 
18 | ### 1. Nomor Antrian
19 | Halaman Nomor Antrian digunakan pengunjung untuk mengambil nomor antrian. Fitur ini bisa Kamu kembangkan lagi dengan menambahkan fungsi cetak nomor antrian secara langsung ke printer, atau memberikan nomor antrian secara online.
20 | 
21 | ### 2. Panggilan Antrian
22 | Halaman Panggilan Antrian digunakan petugas loket untuk memanggil antrian pengunjung. Halaman ini menampilkan informasi jumlah antrian, nomor antrian yang sedang dipanggil nomor antrian selanjutnya yang akan dipanggil, sisa antrian yang belum dipanggil. Petugas loket dapat menekan tombol panggilan antrian pada layar untuk memanggil antrian dengan menggunakan suara yang bisa dihubungkan dengan alat pengeras suara.
23 | 


--------------------------------------------------------------------------------
/pages/nomor/insert.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | // pengecekan ajax request untuk mencegah direct access file, agar file tidak bisa diakses secara langsung dari browser
 3 | // jika ada ajax request
 4 | if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest')) {
 5 |     // panggil file "database.php" untuk koneksi ke database
 6 |     require_once "../../config/database.php";
 7 | 
 8 |     // ambil tanggal sekarang
 9 |     $tanggal = gmdate("Y-m-d", time() + 60 * 60 * 7);
10 | 
11 |     // membuat "no_antrian"
12 |     // sql statement untuk menampilkan data "no_antrian" terakhir pada tabel "tbl_antrian" berdasarkan "tanggal"
13 |     $query = mysqli_query($mysqli, "SELECT max(no_antrian) as nomor FROM tbl_antrian WHERE tanggal='$tanggal'")
14 |                                     or die('Ada kesalahan pada query tampil data : ' . mysqli_error($mysqli));
15 |     // ambil jumlah baris data hasil query
16 |     $rows = mysqli_num_rows($query);
17 | 
18 |     // cek hasil query
19 |     // jika "no_antrian" sudah ada
20 |     if ($rows <> 0) {
21 |         // ambil data hasil query
22 |         $data = mysqli_fetch_assoc($query);
23 |         // "no_antrian" = "no_antrian" yang terakhir + 1
24 |         $no_antrian = $data['nomor'] + 1;
25 |     }
26 |     // jika "no_antrian" belum ada
27 |     else {
28 |         // "no_antrian" = 1
29 |         $no_antrian = 1;
30 |     }
31 | 
32 |     // sql statement untuk insert data ke tabel "tbl_antrian"
33 |     $insert = mysqli_query($mysqli, "INSERT INTO tbl_antrian(tanggal, no_antrian) 
34 |                                     VALUES('$tanggal', '$no_antrian')")
35 |                                     or die('Ada kesalahan pada query insert : ' . mysqli_error($mysqli));
36 |     // cek query
37 |     // jika proses insert berhasil
38 |     if ($insert) {
39 |         // tampilkan pesan sukses insert data
40 |         echo "Sukses";
41 |     }
42 | }
43 | 


--------------------------------------------------------------------------------
/pages/panggilan/get_antrian.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | // pengecekan ajax request untuk mencegah direct access file, agar file tidak bisa diakses secara langsung dari browser
 3 | // jika ada ajax request
 4 | if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest')) {
 5 |     // panggil file "database.php" untuk koneksi ke database
 6 |     require_once "../../config/database.php";
 7 | 
 8 |     // ambil tanggal sekarang
 9 |     $tanggal = gmdate("Y-m-d", time() + 60 * 60 * 7);
10 | 
11 |     // sql statement untuk menampilkan data dari tabel "tbl_antrian" berdasarkan "tanggal"
12 |     $query = mysqli_query($mysqli, "SELECT id, no_antrian, status FROM tbl_antrian WHERE tanggal='$tanggal'")
13 |                                     or die('Ada kesalahan pada query tampil data : ' . mysqli_error($mysqli));
14 |     // ambil jumlah baris data hasil query
15 |     $rows = mysqli_num_rows($query);
16 | 
17 |     // cek hasil query
18 |     // jika data ada
19 |     if ($rows <> 0) {
20 |         $response         = array();
21 |         $response["data"] = array();
22 | 
23 |         // ambil data hasil query
24 |         while ($row = mysqli_fetch_assoc($query)) {
25 |             $data['id']         = $row["id"];
26 |             $data['no_antrian'] = $row["no_antrian"];
27 |             $data['status']     = $row["status"];
28 | 
29 |             array_push($response["data"], $data);
30 |         }
31 | 
32 |         // tampilkan data
33 |         echo json_encode($response);
34 |     }
35 |     // jika data tidak ada
36 |     else {
37 |         $response         = array();
38 |         $response["data"] = array();
39 | 
40 |         // buat data kosong untuk ditampilkan
41 |         $data['id']         = "";
42 |         $data['no_antrian'] = "-";
43 |         $data['status']     = "";
44 | 
45 |         array_push($response["data"], $data);
46 | 
47 |         // tampilkan data
48 |         echo json_encode($response);
49 |     }
50 | }
51 | 


--------------------------------------------------------------------------------
/assets/css/style.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   font-family: Raleway, sans-serif;
  3 |   background-color: #f6f8fd;
  4 | }
  5 | 
  6 | .p-45 {
  7 |   padding: 2rem !important;
  8 | }
  9 | 
 10 | .bg-success {
 11 |   background-color: #00aa9d !important;
 12 | }
 13 | 
 14 | .text-brand {
 15 |   color: #ee5050 !important;
 16 | }
 17 | 
 18 | .text-success {
 19 |   color: #00aa9d !important;
 20 | }
 21 | 
 22 | .btn-success {
 23 |   color: #fff;
 24 |   background-color: #00aa9d;
 25 |   border-color: #00aa9d;
 26 | }
 27 | 
 28 | .btn-success:hover {
 29 |   color: #fff;
 30 |   background-color: #00a189;
 31 |   border-color: #00a491;
 32 | }
 33 | 
 34 | .btn-check:focus + .btn-success,
 35 | .btn-success:focus {
 36 |   color: #fff;
 37 |   background-color: #00a189;
 38 |   border-color: #00a491;
 39 |   box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 0.5);
 40 | }
 41 | 
 42 | .btn-check:checked + .btn-success,
 43 | .btn-check:active + .btn-success,
 44 | .btn-success:active,
 45 | .btn-success.active,
 46 | .show > .btn-success.dropdown-toggle {
 47 |   color: #fff;
 48 |   background-color: #00a491;
 49 |   border-color: #00a189;
 50 | }
 51 | 
 52 | .btn-check:checked + .btn-success:focus,
 53 | .btn-check:active + .btn-success:focus,
 54 | .btn-success:active:focus,
 55 | .btn-success.active:focus,
 56 | .show > .btn-success.dropdown-toggle:focus {
 57 |   box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 0.5);
 58 | }
 59 | 
 60 | .btn-success:disabled,
 61 | .btn-success.disabled {
 62 |   color: #fff;
 63 |   background-color: #00aa9d;
 64 |   border-color: #00aa9d;
 65 | }
 66 | 
 67 | .border-success {
 68 |   border-color: #00aa9d !important;
 69 | }
 70 | 
 71 | .card {
 72 |   border-radius: 1rem;
 73 | }
 74 | 
 75 | .rounded-2 {
 76 |   border-radius: 1rem !important;
 77 | }
 78 | 
 79 | .feature-icon-1 {
 80 |   display: inline-flex;
 81 |   align-items: center;
 82 |   justify-content: center;
 83 |   width: 5rem;
 84 |   height: 5rem;
 85 |   font-size: 3rem;
 86 |   color: #fff;
 87 |   border-radius: 100%;
 88 | }
 89 | 
 90 | .feature-icon-2 {
 91 |   display: inline-flex;
 92 |   align-items: center;
 93 |   justify-content: center;
 94 |   width: 7rem;
 95 |   height: 7rem;
 96 |   font-size: 4rem;
 97 |   color: #fff;
 98 |   border-radius: 100%;
 99 | }
100 | 
101 | .feature-icon-3 {
102 |   display: inline-flex;
103 |   align-items: center;
104 |   justify-content: center;
105 |   width: 5rem;
106 |   height: 5rem;
107 |   font-size: 3.5rem;
108 |   color: #fff;
109 |   border-radius: 100%;
110 | }
111 | 
112 | .breadcrumb {
113 |   font-size: 15px;
114 | }
115 | 
116 | .table {
117 |   --bs-table-striped-bg: #f9f9f9;
118 |   vertical-align: middle;
119 | }
120 | 
121 | .table > :not(:last-child) > :last-child > * {
122 |   border-bottom-color: #dee2e6;
123 | }
124 | 
125 | tbody,
126 | td,
127 | tfoot,
128 | th,
129 | thead,
130 | tr {
131 |   border-color: #ebedf2 !important;
132 | }
133 | 
134 | div.dataTables_wrapper div.dataTables_paginate ul.pagination {
135 |   margin: 20px 0 2px;
136 |   white-space: nowrap;
137 |   justify-content: flex-end;
138 | }
139 | 
140 | div.dataTables_wrapper div.dataTables_info {
141 |   padding-top: 1.8em;
142 | }
143 | 
144 | table.table-bordered.dataTable th {
145 |   border-bottom-width: 2px;
146 |   font-weight: 600;
147 | }
148 | 
149 | .page-link {
150 |   position: relative;
151 |   display: block;
152 |   color: #00aa9d;
153 |   text-decoration: none;
154 |   background-color: #fff;
155 |   border: 1px solid #dee2e6;
156 |   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
157 |     border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
158 | }
159 | 
160 | .page-link:hover {
161 |   z-index: 2;
162 |   color: #00a189;
163 |   background-color: #e9ecef;
164 |   border-color: #dee2e6;
165 | }
166 | 
167 | .page-link:focus {
168 |   z-index: 3;
169 |   color: #00a189;
170 |   background-color: #e9ecef;
171 |   outline: 0;
172 |   box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
173 | }
174 | 
175 | .page-item.active .page-link {
176 |   z-index: 3;
177 |   color: #fff;
178 |   background-color: #00aa9d;
179 |   border-color: #00aa9d;
180 | }
181 | 


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
  1 | <!-- Aplikasi Antrian Berbasis Web 
  2 | ******************************************
  3 | * Developer   : Indra Styawantoro
  4 | * Company     : Pustaka Koding
  5 | * Release     : Agustus 2021
  6 | * Update      : -
  7 | * Website     : pustakakoding.com
  8 | * E-mail      : pustaka.koding@gmail.com
  9 | * WhatsApp    : +62-813-7778-3334
 10 | -->
 11 | 
 12 | <!doctype html>
 13 | <html lang="en" class="h-100">
 14 | 
 15 | <head>
 16 |     <!-- Required meta tags -->
 17 |     <meta charset="utf-8">
 18 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 19 |     <meta name="description" content="Aplikasi Antrian Berbasis Web">
 20 |     <meta name="author" content="Indra Styawantoro">
 21 | 
 22 |     <!-- Title -->
 23 |     <title>Aplikasi Antrian Berbasis Web</title>
 24 | 
 25 |     <!-- Favicon icon -->
 26 |     <link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon">
 27 | 
 28 |     <!-- Bootstrap CSS -->
 29 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
 30 | 
 31 |     <!-- Bootstrap Icons -->
 32 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
 33 | 
 34 |     <!-- Font -->
 35 |     <link href="https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900&amp;display=swap" rel="stylesheet">
 36 | 
 37 |     <!-- Custom Style -->
 38 |     <link rel="stylesheet" href="assets/css/style.css">
 39 | </head>
 40 | 
 41 | <body class="d-flex flex-column h-100">
 42 |     <main class="flex-shrink-0">
 43 |         <div class="container pt-5">
 44 |             <!-- tampilkan pesan selamat datang -->
 45 |             <div class="alert alert-light d-flex align-items-center mb-5" role="alert">
 46 |                 <i class="bi-info-circle text-success me-3 fs-3"></i>
 47 |                 <div>
 48 |                     Selamat Datang di <strong>Aplikasi Antrian Berbasis Web</strong>. Silahkan pilih halaman yang ingin ditampilkan.
 49 |                 </div>
 50 |             </div>
 51 | 
 52 |             <div class="row gx-5">
 53 |                 <!-- link halaman nomor antrian -->
 54 |                 <div class="col-lg-6 mb-4">
 55 |                     <div class="card border-0 shadow-sm">
 56 |                         <div class="card-body p-5">
 57 |                             <div class="feature-icon-1 bg-success bg-gradient mb-4">
 58 |                                 <i class="bi-people"></i>
 59 |                             </div>
 60 |                             <h3>Nomor Antrian</h3>
 61 |                             <p class="mb-5">Halaman Nomor Antrian digunakan pengunjung untuk mengambil nomor antrian.</p>
 62 |                             <a href="pages/nomor" class="btn btn-success rounded-pill px-4 py-2">
 63 |                                 Tampilkan <i class="bi-arrow-right ms-2"></i>
 64 |                             </a>
 65 |                         </div>
 66 |                     </div>
 67 |                 </div>
 68 |                 <!-- link halaman panggilan antrian -->
 69 |                 <div class="col-lg-6 mb-4">
 70 |                     <div class="card border-0 shadow-sm">
 71 |                         <div class="card-body p-5">
 72 |                             <div class="feature-icon-1 bg-success bg-gradient mb-4">
 73 |                                 <i class="bi-mic"></i>
 74 |                             </div>
 75 |                             <h3>Panggilan Antrian</h3>
 76 |                             <p class="mb-5">Halaman Panggilan Antrian digunakan petugas loket untuk memanggil antrian pengunjung.</p>
 77 |                             <a href="pages/panggilan" class="btn btn-success rounded-pill px-4 py-2">
 78 |                                 Tampilkan <i class="bi-arrow-right ms-2"></i>
 79 |                             </a>
 80 |                         </div>
 81 |                     </div>
 82 |                 </div>
 83 |             </div>
 84 |         </div>
 85 |     </main>
 86 | 
 87 |     <!-- Footer -->
 88 |     <footer class="footer mt-auto py-4">
 89 |         <div class="container">
 90 |             <!-- copyright -->
 91 |             <div class="copyright text-center mb-2 mb-md-0">
 92 |                 &copy; 2021 - <a href="https://pustakakoding.com/" target="_blank" class="text-brand text-decoration-none">Pustaka Koding</a>. All rights reserved.
 93 |             </div>
 94 |         </div>
 95 |     </footer>
 96 | 
 97 |     <!-- Popper and Bootstrap JS -->
 98 |     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
 99 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
100 | </body>
101 | 
102 | </html>


--------------------------------------------------------------------------------
/pages/nomor/index.php:
--------------------------------------------------------------------------------
  1 | <!-- Aplikasi Antrian Berbasis Web 
  2 | ******************************************
  3 | * Developer   : Indra Styawantoro
  4 | * Company     : Pustaka Koding
  5 | * Release     : Agustus 2021
  6 | * Update      : -
  7 | * Website     : pustakakoding.com
  8 | * E-mail      : pustaka.koding@gmail.com
  9 | * WhatsApp    : +62-813-7778-3334
 10 | -->
 11 | 
 12 | <!doctype html>
 13 | <html lang="en" class="h-100">
 14 | 
 15 | <head>
 16 |     <!-- Required meta tags -->
 17 |     <meta charset="utf-8">
 18 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 19 |     <meta name="description" content="Aplikasi Antrian Berbasis Web">
 20 |     <meta name="author" content="Indra Styawantoro">
 21 | 
 22 |     <!-- Title -->
 23 |     <title>Aplikasi Antrian Berbasis Web</title>
 24 | 
 25 |     <!-- Favicon icon -->
 26 |     <link rel="shortcut icon" href="../../assets/img/favicon.ico" type="image/x-icon">
 27 | 
 28 |     <!-- Bootstrap CSS -->
 29 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
 30 | 
 31 |     <!-- Bootstrap Icons -->
 32 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
 33 | 
 34 |     <!-- Font -->
 35 |     <link href="https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900&amp;display=swap" rel="stylesheet">
 36 | 
 37 |     <!-- Custom Style -->
 38 |     <link rel="stylesheet" href="../../assets/css/style.css">
 39 | </head>
 40 | 
 41 | <body class="d-flex flex-column h-100">
 42 |     <main class="flex-shrink-0">
 43 |         <div class="container pt-5">
 44 |             <div class="row justify-content-lg-center">
 45 |                 <div class="col-lg-5 mb-4">
 46 |                     <div class="px-4 py-3 mb-4 bg-white rounded-2 shadow-sm">
 47 |                         <!-- judul halaman -->
 48 |                         <div class="d-flex align-items-center me-md-auto">
 49 |                             <i class="bi-people-fill text-success me-3 fs-3"></i>
 50 |                             <h1 class="h5 pt-2">Nomor Antrian</h1>
 51 |                         </div>
 52 |                     </div>
 53 | 
 54 |                     <div class="card border-0 shadow-sm">
 55 |                         <div class="card-body text-center d-grid p-5">
 56 |                             <div class="border border-success rounded-2 py-2 mb-5">
 57 |                                 <h3 class="pt-4">ANTRIAN</h3>
 58 |                                 <!-- menampilkan informasi jumlah antrian -->
 59 |                                 <h1 id="antrian" class="display-1 fw-bold text-success text-center lh-1 pb-2"></h1>
 60 |                             </div>
 61 |                             <!-- button pengambilan nomor antrian -->
 62 |                             <a id="insert" href="javascript:void(0)" class="btn btn-success btn-block rounded-pill fs-5 px-5 py-4 mb-2">
 63 |                                 <i class="bi-person-plus fs-4 me-2"></i> Ambil Nomor
 64 |                             </a>
 65 |                         </div>
 66 |                     </div>
 67 |                 </div>
 68 |             </div>
 69 |         </div>
 70 |     </main>
 71 | 
 72 |     <!-- Footer -->
 73 |     <footer class="footer mt-auto py-4">
 74 |         <div class="container">
 75 |             <!-- copyright -->
 76 |             <div class="copyright text-center mb-2 mb-md-0">
 77 |                 &copy; 2021 - <a href="https://pustakakoding.com/" target="_blank" class="text-brand text-decoration-none">Pustaka Koding</a>. All rights reserved.
 78 |             </div>
 79 |         </div>
 80 |     </footer>
 81 | 
 82 |     <!-- jQuery Core -->
 83 |     <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
 84 |     <!-- Popper and Bootstrap JS -->
 85 |     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
 86 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
 87 | 
 88 |     <script type="text/javascript">
 89 |         $(document).ready(function() {
 90 |             // tampilkan jumlah antrian
 91 |             $('#antrian').load('get_antrian.php');
 92 | 
 93 |             // proses insert data
 94 |             $('#insert').on('click', function() {
 95 |                 $.ajax({
 96 |                     type: 'POST',                       // mengirim data dengan method POST
 97 |                     url: 'insert.php',                  // url file proses insert data
 98 |                     success: function(result) {         // ketika proses insert data selesai
 99 |                         // jika berhasil
100 |                         if (result === 'Sukses') {
101 |                             // tampilkan jumlah antrian
102 |                             $('#antrian').load('get_antrian.php').fadeIn('slow');
103 |                         }
104 |                     },
105 |                 });
106 |             });
107 |         });
108 |     </script>
109 | </body>
110 | 
111 | </html>


--------------------------------------------------------------------------------
/pages/panggilan/index.php:
--------------------------------------------------------------------------------
  1 | <!-- Aplikasi Antrian Berbasis Web 
  2 | ******************************************
  3 | * Developer   : Indra Styawantoro
  4 | * Company     : Pustaka Koding
  5 | * Release     : Agustus 2021
  6 | * Update      : -
  7 | * Website     : pustakakoding.com
  8 | * E-mail      : pustaka.koding@gmail.com
  9 | * WhatsApp    : +62-813-7778-3334
 10 | -->
 11 | 
 12 | <!doctype html>
 13 | <html lang="en" class="h-100">
 14 | 
 15 | <head>
 16 |     <!-- Required meta tags -->
 17 |     <meta charset="utf-8">
 18 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 19 |     <meta name="description" content="Aplikasi Antrian Berbasis Web">
 20 |     <meta name="author" content="Indra Styawantoro">
 21 | 
 22 |     <!-- Title -->
 23 |     <title>Aplikasi Antrian Berbasis Web</title>
 24 | 
 25 |     <!-- Favicon icon -->
 26 |     <link rel="shortcut icon" href="../../assets/img/favicon.ico" type="image/x-icon">
 27 | 
 28 |     <!-- Bootstrap CSS -->
 29 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
 30 | 
 31 |     <!-- Bootstrap Icons -->
 32 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
 33 | 
 34 |     <!-- Font -->
 35 |     <link href="https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900&amp;display=swap" rel="stylesheet">
 36 | 
 37 |     <!-- DataTables -->
 38 |     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/dt-1.10.25/datatables.min.css" />
 39 | 
 40 |     <!-- Custom Style -->
 41 |     <link rel="stylesheet" href="../../assets/css/style.css">
 42 | </head>
 43 | 
 44 | <body class="d-flex flex-column h-100">
 45 |     <main class="flex-shrink-0">
 46 |         <div class="container pt-4">
 47 |             <div class="d-flex flex-column flex-md-row px-4 py-3 mb-4 bg-white rounded-2 shadow-sm">
 48 |                 <!-- judul halaman -->
 49 |                 <div class="d-flex align-items-center me-md-auto">
 50 |                     <i class="bi-mic-fill text-success me-3 fs-3"></i>
 51 |                     <h1 class="h5 pt-2">Panggilan Antrian</h1>
 52 |                 </div>
 53 |                 <!-- breadcrumbs -->
 54 |                 <div class="ms-5 ms-md-0 pt-md-3 pb-md-0">
 55 |                     <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
 56 |                         <ol class="breadcrumb">
 57 |                             <li class="breadcrumb-item"><a href="https://pustakakoding.com/"><i class="bi-house-fill text-success"></i></a></li>
 58 |                             <li class="breadcrumb-item" aria-current="page">Dashboard</li>
 59 |                             <li class="breadcrumb-item" aria-current="page">Antrian</li>
 60 |                         </ol>
 61 |                     </nav>
 62 |                 </div>
 63 |             </div>
 64 | 
 65 |             <div class="row">
 66 |                 <!-- menampilkan informasi jumlah antrian -->
 67 |                 <div class="col-md-3 mb-4">
 68 |                     <div class="card border-0 shadow-sm">
 69 |                         <div class="card-body p-4">
 70 |                             <div class="d-flex justify-content-start">
 71 |                                 <div class="feature-icon-3 me-4">
 72 |                                     <i class="bi-people text-warning"></i>
 73 |                                 </div>
 74 |                                 <div>
 75 |                                     <p id="jumlah-antrian" class="fs-3 text-warning mb-1"></p>
 76 |                                     <p class="mb-0">Jumlah Antrian</p>
 77 |                                 </div>
 78 |                             </div>
 79 |                         </div>
 80 |                     </div>
 81 |                 </div>
 82 |                 <!-- menampilkan informasi nomor antrian yang sedang dipanggil -->
 83 |                 <div class="col-md-3 mb-4">
 84 |                     <div class="card border-0 shadow-sm">
 85 |                         <div class="card-body p-4">
 86 |                             <div class="d-flex justify-content-start">
 87 |                                 <div class="feature-icon-3 me-4">
 88 |                                     <i class="bi-person-check text-success"></i>
 89 |                                 </div>
 90 |                                 <div>
 91 |                                     <p id="antrian-sekarang" class="fs-3 text-success mb-1"></p>
 92 |                                     <p class="mb-0">Antrian Sekarang</p>
 93 |                                 </div>
 94 |                             </div>
 95 |                         </div>
 96 |                     </div>
 97 |                 </div>
 98 |                 <!-- menampilkan informasi nomor antrian yang akan dipanggil selanjutnya -->
 99 |                 <div class="col-md-3 mb-4">
100 |                     <div class="card border-0 shadow-sm">
101 |                         <div class="card-body p-4">
102 |                             <div class="d-flex justify-content-start">
103 |                                 <div class="feature-icon-3 me-4">
104 |                                     <i class="bi-person-plus text-info"></i>
105 |                                 </div>
106 |                                 <div>
107 |                                     <p id="antrian-selanjutnya" class="fs-3 text-info mb-1"></p>
108 |                                     <p class="mb-0">Antrian Selanjutnya</p>
109 |                                 </div>
110 |                             </div>
111 |                         </div>
112 |                     </div>
113 |                 </div>
114 |                 <!-- menampilkan informasi jumlah antrian yang belum dipanggil -->
115 |                 <div class="col-md-3 mb-4">
116 |                     <div class="card border-0 shadow-sm">
117 |                         <div class="card-body p-4">
118 |                             <div class="d-flex justify-content-start">
119 |                                 <div class="feature-icon-3 me-4">
120 |                                     <i class="bi-person text-danger"></i>
121 |                                 </div>
122 |                                 <div>
123 |                                     <p id="sisa-antrian" class="fs-3 text-danger mb-1"></p>
124 |                                     <p class="mb-0">Sisa Antrian</p>
125 |                                 </div>
126 |                             </div>
127 |                         </div>
128 |                     </div>
129 |                 </div>
130 |             </div>
131 | 
132 |             <div class="card border-0 shadow-sm">
133 |                 <div class="card-body p-4">
134 |                     <div class="table-responsive">
135 |                         <table id="tabel-antrian" class="table table-bordered table-striped table-hover" width="100%">
136 |                             <thead>
137 |                                 <tr>
138 |                                     <th>Nomor Antrian</th>
139 |                                     <th>Status</th>
140 |                                     <th>Panggil</th>
141 |                                 </tr>
142 |                             </thead>
143 |                         </table>
144 |                     </div>
145 |                 </div>
146 |             </div>
147 |         </div>
148 |     </main>
149 | 
150 |     <!-- Footer -->
151 |     <footer class="footer mt-auto py-4">
152 |         <div class="container">
153 |             <hr class="my-4">
154 |             <!-- copyright -->
155 |             <div class="copyright text-center mb-2 mb-md-0">
156 |                 &copy; 2021 - <a href="https://pustakakoding.com/" target="_blank" class="text-brand text-decoration-none">Pustaka Koding</a>. All rights reserved.
157 |             </div>
158 |         </div>
159 |     </footer>
160 | 
161 |     <!-- load file audio bell antrian -->
162 |     <audio id="tingtung" src="../../assets/audio/tingtung.mp3"></audio>
163 | 
164 |     <!-- jQuery Core -->
165 |     <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
166 |     <!-- Popper and Bootstrap JS -->
167 |     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
168 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
169 | 
170 |     <!-- DataTables -->
171 |     <script type="text/javascript" src="https://cdn.datatables.net/v/bs5/dt-1.10.25/datatables.min.js"></script>
172 |     <!-- Responsivevoice -->
173 |     <!-- Get API Key -> https://responsivevoice.org/ -->
174 |     <script src="https://code.responsivevoice.org/responsivevoice.js?key=jQZ2zcdq"></script>
175 | 
176 |     <script type="text/javascript">
177 |         $(document).ready(function() {
178 |             // tampilkan informasi antrian
179 |             $('#jumlah-antrian').load('get_jumlah_antrian.php');
180 |             $('#antrian-sekarang').load('get_antrian_sekarang.php');
181 |             $('#antrian-selanjutnya').load('get_antrian_selanjutnya.php');
182 |             $('#sisa-antrian').load('get_sisa_antrian.php');
183 | 
184 |             // menampilkan data antrian menggunakan DataTables
185 |             var table = $('#tabel-antrian').DataTable({
186 |                 "lengthChange": false,                  // non-aktifkan fitur "lengthChange"
187 |                 "searching": false,                     // non-aktifkan fitur "Search"
188 |                 "ajax": "get_antrian.php",              // url file proses tampil data dari database
189 |                 // menampilkan data
190 |                 "columns": [{
191 |                         "data": "no_antrian",
192 |                         "width": '250px',
193 |                         "className": 'text-center'
194 |                     },
195 |                     {
196 |                         "data": "status",
197 |                         "visible": false
198 |                     },
199 |                     {
200 |                         "data": null,
201 |                         "orderable": false,
202 |                         "searchable": false,
203 |                         "width": '100px',
204 |                         "className": 'text-center',
205 |                         "render": function(data, type, row) {
206 |                             // jika tidak ada data "status"
207 |                             if (data["status"] === "") {
208 |                                 // sembunyikan button panggil
209 |                                 var btn = "-";
210 |                             }
211 |                             // jika data "status = 0"
212 |                             else if (data["status"] === "0") {
213 |                                 // tampilkan button panggil
214 |                                 var btn = "<button class=\"btn btn-success btn-sm rounded-circle\"><i class=\"bi-mic-fill\"></i></button>";
215 |                             }
216 |                             // jika data "status = 1"
217 |                             else if (data["status"] === "1") {
218 |                                 // tampilkan button ulangi panggilan
219 |                                 var btn = "<button class=\"btn btn-secondary btn-sm rounded-circle\"><i class=\"bi-mic-fill\"></i></button>";
220 |                             };
221 |                             return btn;
222 |                         }
223 |                     },
224 |                 ],
225 |                 "order": [
226 |                     [0, "desc"]             // urutkan data berdasarkan "no_antrian" secara descending
227 |                 ],
228 |                 "iDisplayLength": 10,       // tampilkan 10 data per halaman
229 |             });
230 | 
231 |             // panggilan antrian dan update data
232 |             $('#tabel-antrian tbody').on('click', 'button', function() {
233 |                 // ambil data dari datatables 
234 |                 var data = table.row($(this).parents('tr')).data();
235 |                 // buat variabel untuk menampilkan data "id"
236 |                 var id = data["id"];
237 |                 // buat variabel untuk menampilkan audio bell antrian
238 |                 var bell = document.getElementById('tingtung');
239 | 
240 |                 // mainkan suara bell antrian
241 |                 bell.pause();
242 |                 bell.currentTime = 0;
243 |                 bell.play();
244 | 
245 |                 // set delay antara suara bell dengan suara nomor antrian
246 |                 durasi_bell = bell.duration * 770;
247 | 
248 |                 // mainkan suara nomor antrian
249 |                 setTimeout(function() {
250 |                     responsiveVoice.speak("Nomor Antrian, " + data["no_antrian"] + ", menuju, loket, 1", "Indonesian Male", {
251 |                         rate: 0.9,
252 |                         pitch: 1,
253 |                         volume: 1
254 |                     });
255 |                 }, durasi_bell);
256 | 
257 |                 // proses update data
258 |                 $.ajax({
259 |                     type: "POST",           // mengirim data dengan method POST
260 |                     url: "update.php",      // url file proses update data
261 |                     // tentukan data yang dikirim
262 |                     data: {
263 |                         id: id
264 |                     }
265 |                 });
266 |             });
267 | 
268 |             // auto reload data antrian setiap 1 detik untuk menampilkan data secara realtime
269 |             setInterval(function() {
270 |                 $('#jumlah-antrian').load('get_jumlah_antrian.php').fadeIn("slow");
271 |                 $('#antrian-sekarang').load('get_antrian_sekarang.php').fadeIn("slow");
272 |                 $('#antrian-selanjutnya').load('get_antrian_selanjutnya.php').fadeIn("slow");
273 |                 $('#sisa-antrian').load('get_sisa_antrian.php').fadeIn("slow");
274 |                 table.ajax.reload(null, false);
275 |             }, 1000);
276 |         });
277 |     </script>
278 | </body>
279 | 
280 | </html>


--------------------------------------------------------------------------------