Aplikasi Antrian Berbasis Web Dengan Suara – PHP MySQL

Pada kesempatan kali ini kami ingin memperkenalkan aplikasi canggih terbaru kami yaitu software sistem aplikasi antrian berbasis web dengan suara berbasis PHP dan MySQL (MariaDB). Aplikasi ini kami kembangkan dengan detail dan teliti sehingga membuat aplikasi ini begitu powefull, handal, dan professional.

Aplikasi Antrian Berbasis Web Dengan Suara - PHP MySQL
Aplikasi Antrian Berbasis Web Dengan Suara – PHP MySQL

I. Tentang Sistem Aplikasi Antrian Berbasis Web Dengan Suara

Sistem aplikasi antrian berbasis web ini kami kembangkan untuk memenuhi kebutuhan adanya aplikasi antrian professional yang fleksibel, dimana berbagai pengaturan dapat dilakukan dengan mudah, baik pengaturan sistem antrian itu sendiri maupun pengaturan tampilan aplikasi.

Dengan fleksibilitas yang ada, sistem antrian ini dapat digunakan untuk barbagai keperluan, seperti untuk sistem aplikasi antrian rumah sakit, sistem aplikasi antrian bank, sistem aplikasi antrian perkantoran, dll tanpa harus melakukan coding pada aplikasi.

II. Lingkunan Pengembangan

Sistem aplikasi antrian berbasis web ini kami kembangkan menggunakan software sebagai berikut:

  • Bahasa Pemrograman PHP versi > 7 dengan database MariaDB/Maria DB (bundle yang digunakan adalah XAMPP 8.1.x)
  • Framework Codeigniter 4
  • Menggunakan Framework Javascript jQuery 3
  • Menggunakan Bootstrap 5
  • Menggunakan HTML 5 dan CSS 3
  • Menggunakan Font Awesome 5

Rencana kedepan aplikasi akan terus dikembangkan sehingga kompatibel dengan versi terbaru dari masing masing komponen tersebut diatas, sehingga performa aplikasi menjadi semakin baik

III. Fitur Software Aplikasi Antrian Berbasis Web Dengan Suara

Sistem aplikasi antrian yang kami kembangkan ini memiliki fitur canggih antara lain sebagai berkut:

  1. Realtime update, baik pengambilan antrian maupun pemanggilan antrian. Ketika antrian diambil atau antrian dipanggil, maka otomatis semua layar akan terupdate.
  2. Manajemen antrian yang mudah dan user friendly, baik pengelolaan antrian, reset antrian, maupun resume antrian.
  3. Menggunakan suara professional, baik awalan antrian (bell) maupun suara pemanggilan antrian.
  4. Pengaturan suara yang mudah dan fleksibel, baik awalah antrian maupun pemanggilan antrian.
  5. Output layar yang adaptif. Dapat ditampilkan dengan baik pada layar dengan resolusi Full HD.
  6. Satu antrian untuk beberapa loket.
  7. Pengaturan layar antrian yang mudah dan fleksibel. Cukup drag and drop untuk mengatur antrian mana yang ingin ditampilkan di layar.
  8. Tema tampilan layar yang variatif dan menarik.
  9. Berbagai pilihan source video, baik lokal maupun youtube.
  10. Dapat terhubung dengan printer thermal.
  11. Suara panggilan antrian terpusat. Berapapunjumlah client yang melakukan pemanggilan antrian, maka suara panggilan antrian hanya dilakukan di layar monitor antrian.
  12. Menggunakan Admin Template CI4 Jagowebdev. Dengan menggunakan admin template ini, maka manajemen aplikasi menjadi lebih mudah, mulai dari menu, user, module, hak akses, dll.

Berikut detil penjelasan beberapa fitur yang ada

1. Realtime Update

Aplikasi Antrian ini sudah dilengkapi fitur realtime update, dengan fitur ini maka jika ada nomor antrian baru yang diambil atau ada nomor antrian yang dipanggil, maka data antrian baik pada layar monitor maupun pada panel admin akan otomatis update. Misal, jika pengunjung mengambil nomor antrian, maka otomatis nomor antrian pada semua conter akan terupdate, seperti contoh pada gambar berikut (gerakan gambar looping):

Auto Update Layar Monitor Ambil Antrian- Aplikasi Antrian Dengan Suara
Auto Update Layar Monitor Ambil Antrian- Aplikasi Antrian Dengan Suara

Pada gambar diatas, ketika pengunjung mengambil antrian (gambar kanan) maka otomatis di panel aplikasi jumlah antrian akan bertambah (gambar kiri)

Demikian juga ketika ada counter yang memanggil nomor antrian, maka otomatis nomor antrian pada layar monitor akan otomatis terupdate, contoh seperti gambar berikut (gerakan gambar looping):

Auto Update Layar Monitor Antrian
Auto Update Layar Monitor Antrian

Pada gambar diatas, ketika antrian dipanggil (gambar kiri) maka nomor antrian di layar monitor akan otomatis terupdate (gambar kanan)

2. Menggunakan Pengisi Suara Professional

Aplikasi antrian berbasis web yang kami kembangkan telah dilengkapi dengan suara yang akan berbunyi ketika nomor antrian dipanggil. Suara yang kami sertakan pada aplikasi ini hasil rekaman sendiri (suara bell) dan dari pengisi suara professional (pernah bekerja di Metro TV) sehingga membuat aplikasi antrian ini menjadi semakin berkualitas dan professional

Suara yang kami sertakan pada aplikasi ini sudah mengakomodir berbagai keperluan penyusunan kalimat seperti membuat kalimat “nomor antrian a sembilan puluh enam silakan menuju ke customer service empat”. Kustomisasi suara dapat dilakukan dengan mudah. Anda cukup menambahkan file suara pada folder yang telah ditentukan maka otomatis suara akan berubah.

3. Kategori Antrian – Satu Antrian Beberapa Loket

Aplikasi Antrian ini kami sedemikian rupa desain sehingga memungkinkan Anda untuk melakukan grouping antrian. Dengan model ini, maka memungkinkan Anda dapat membuat banyak antrian dalam satu aplikasi, disamping itu dalam satu antrian dapat memiliki beberapa tujuan.

Sebagai contoh: dalam satu aplikasi, Anda dapat membuat Group Antrian Layanan dan Group Antrian Poliklinik, didalam Group Antrian Layanan terdapat antrian Customer Service dan Loket, selanjutnya didalam antrian Customer Service terdapat beberapa tujuan, yaitu: Customer Service 1, Customer Service 2, Customer Service 3, Customer Service 4, dan didalam antrian loket terdapat beberapa tujuan yaitu Loket 1, Loket 2, masing-masing antrian tersebut dapat berdiri sendiri namun tetap dalam satu aplikasi (satu aplikasi untuk semua).

Pengaturan group juga sangat fleksibel, Anda dapat mengaktifkan dan menonaktifkan group antrian sesuai dengan kebutuhan dan tentunya bersifat realtime, dimana jika group antrian di nonaktifkan, maka pada layar antrian, group tersebut juga kan otomatis non aktif.

Pengaturan Antrian Yang Mudah, Fleksibel dan User Friendly
Pengaturan Antrian Yang Mudah, Fleksibel dan User Friendly

Berikut contoh realtime update pada layar monitor ketika terdapat group antrian yang diaktifkan maupun dinonaktifkan

Realtime Update Layar Antrian Saat Antrian Dinonaktifkan
Realtime Update Layar Antrian Saat Antrian Dinonaktifkan

Berikut contoh realtime update pada layar antrian ketika terdapat tujuan antrian yang diaktifkan maupun dinonaktifkan.

Realtime Update Layar Antrian Saat Tujuan Antrian Dinonaktifkan
Realtime Update Layar Antrian Saat Tujuan Antrian Diaktifkan/Dinonaktifkan

4. Pengaturan Suara Yang Fleksibel

Pengaturan suara dapat dilakukan dengan mudah dan fleksibel sesuai dengan kebutuhan. Kami telah menyediakan built in file suara yang dapat Anda susun sehingga dapat mengeluarkan kalimat sesuai dengan kebutuhan misal membuat kalimat Customer Service A, Counter B, Poliklinik Mata, dll. Kustomisasi suara juga dapat dilakukan dengan mudah, Anda cukup menambahkan atau mengganti file suara pada folder yang telah ditentukan.

Berikut contoh tampilan menu untuk penyusunan kalimat yang ada pada menu Referensi Tujuan

Pengaturan Suara Pada Aplikasi Antrian Berbasis Web Dengan PHP dan MySQL
Pengaturan Suara Pada Aplikasi Antrian Berbasis Web Dengan PHP dan MySQL

Berikut contoh menu untuk melakukan pemilihan suara

Pemilihan Suara Pada Aplikasi Antrian
Pemilihan Suara Pada Aplikasi Antrian

Selain suara antrian, Anda juga dapat dengan mudah mengatur suara awalan ketika antrian akan dipanggil, pada konfigurasi default, suara awalannya adalah suara bell dan nomor antrian, berikut contoh tampilan pengaturan suara awalan panggil antrian:

Pengaturan Suara Awalan Pemanggilan Antrian Yang Fleksibel
Pengaturan Suara Awalan Pemanggilan Antrian

Selanjutnya, berikut contoh folder yang bersisi data suara. jika Anda menambahkan file suara pada folder ini, maka file suara tersebut otomatis muncul dalam daftar suara yang digunakan untuk membuat kalimat pada menu Referensi Tujuan

File Suara Pada Aplikasi Antrian
File Suara Pada Aplikasi Antrian

5. Pengaturan Antrian Pada Monitor

Pada aplikasi antrian berbasis web yang kami kembangkan ini memungkinkan Anda dengan mudah mengatur antrian yang ingin ditampilkan dilayar monitor. Anda cukup melakukan drag and drop pada antrian yang ada ke layar monitor yang ingin ditampilkan. berikut contoh tampilannya

Pengaturan Layar Monitor Antrian - Pilih Layar Antrian
Pengaturan Layar Monitor Antrian – Pilih Layar Antrian

Pada contoh diatas, jika pada Layar Polikinik kita klik tombol Detail, maka pada halaman berikutnya kita dapat mengatur antrian apa saja yang ingin kita tampilkan pada Layar Poliklinik tersebut, contoh tampilannya adalah sebagai berikut

Pengaturan Antrian Yang Ingin Ditampilkan di Layar
Pengaturan Antrian Yang Ingin Ditampilkan di Layar Dengan Drag and Drop

6. Output Layar Monitor Yang Adaptif

Aplikasi antrian berbasis web ini kami kembangkan sedemikian rupa sehingga dapat menyesuaikan (fit) dengan berbagai ukuran resousi layar, mulai dari 1280x 960 higga full HD, dengan demikian Anda tidak perlu khawatir monitor antrian tidak tertampil dengan baik.

Berikut contoh tampilan monitor antrian pada layar monitor televisi 43 inchi yang di tampilkan dari monitor komputer dengan resolusi Full HD 1920 x 1080

Tampilan Layar Monitor Aplikasi Antrian
Tampilan Layar Monitor Aplikasi Antrian

Berikut tampilan di PC

Tampilan Layar Monitor Aplikasi Antrian Berbasis Web Dengan Suara
Tampilan Layar Monitor Aplikasi Antrian Berbasis Web Dengan Suara

7. Output Layar Antrian Yang Adaptif

Ketika membangun sistem antrian maka kita perlu menyediakan layar monitor yang yang digunakan untuk mengambil nomor antrian. Aplikasi antrian ini telah menyediakan halaman ambil antrian untuk ditampilkan di layar monitor tersebut. Halaman ambil antrian ini telah kami desain sehingga bersifat adaptif yang otomatis menyesuaikan dengan dimensi layar, sehingga Anda tidak perlu melakukan pengaturan pada tampilan ambil antrian.

Berikut contoh tampilan halaman ambil antrian

Tampilan Layar Ambil Antrian
Tampilan Layar Ambil Antrian

8. Built in Konektivitas Thermal Printer (Printer Thermal)

Ketika mengambil antrian, tentu penggunjung perlu diberikan cetakan yang berisi nomor antrian tersebut. Aplikasi sistem antrian berbasis web ini sudah dilengkapi dengan konektivitas dengan printer thermal, dimana ketika pengujung mengambil nomor antrian, maka otomatis nomor antrian tersebut akan langsung tercetak.

Nomor Antrian Cetakan Thermal Printer
Nomor Antrian Cetakan Thermal Printer

Konfigurasi cetakan nomor antrian ini mengukuti pengaturan identitas organisasi

Pengaturan Identitas Pada Apliaksi Antrian
Pengaturan Identitas Pada Apliaksi Antrian

9. Berbagai Pilihan Theme Menarik

Kami menyadari bahwa penampilan mencerminkan citra organisasi. Berangkat dari pemahaman tersebut, kami telah mendesain aplikasi ini sedemikian rupa sehingga memungkinkan pengguna untuk mengatur tampilan dengan mudah baik tampilan layar monitor maupun tampilan aplikasi. Dengan fitur tersebut, layar Antrian menjadi lebih menarik dan professional.

Beberapa pengaturan yang dapat dilakuakan diantaranya adalah: pengaturan tema warna, pengaturan jenis huruf, pengaturan link youtube, pengaturan teks pada footer termasuk pilihan mode apakah statis atau berbentuk running text, dll. Berikut contoh tampilan pengaturan layar monitor.

Pengaturan Tampilan Layar Monitor Antrian
Pengaturan Tampilan Layar Monitor Antrian

10. Menggunakan Admin Template Codeigniter 4

Admin Template yang digunakan untuk pengembangan aplikasi ini menggunakan Admin Template Codeigniter 4 yang telah kami kembangkan sebelumnya, dengan menggunakan admin template ini maka pengembangan/kustomisasi aplikasi menjadi lebih mudah.

Selain itu, dengan admin template ini, pengaturan aplikasi antrian dapat dilakukan dengan mudah seperti pengaturan menu, module, user, role user, logo, themes, teks pada footer, dll

Admin Template Codeigniter 4 Pada Aplikasi Antrian
Admin Template Codeigniter 4 Pada Aplikasi Antrian

11. Resume Jumlah Antrian

Sebagai bahan monitoring, terkadang kita perlu untuk mengetahui banyaknya jumlah antrian yang ada pada waktu tertentu. Aplikasi antrian berbasis web ini sudah kami lengkapi dengan halaman monitoring jumlah antrian dimana Anda dapat melihat banyaknya antrian yang diambil dan yang dipanggil pada waktu tertentu. Berikut contoh tampilan halaman tersebut.

Rekap Antrian - Aplikasi Antrian
Rekap Antrian – Aplikasi Antrian

12. Pendapat User

Berikut pendapat spontan dari pengguna aplikasi yang berpendapat bahwa aplikasinya canggih dan user friendly, tidak perlu otak atik source code untuk melakukan pengaturan aplikasi

Testimoni Aplikasi Antrian - Mudah dan User Friendlly
Testimoni Aplikasi Antrian – Mudah dan User Friendlly

13. Investasi Software Aplikasi Antrian Berbasis Web Dengan Suara

Segera miliki apilkasi antrian berbasis web yang canggih ini dengan biaya investasi yang sangat terjangkau (penawaran terbatas), segera kunjungi halaman ini. Sebagai informasi, aplikasi ini bersifat free lifetime update yang artinya sekali Anda miliki maka kapanpun ada update aplikasi maka Anda akan mendapatkannya secara gratis.

Note: Biaya investasi dapat berubah sewaktu waktu seiring dengan penambahan fitur aplikasi. So grab it fast.

Penutup

Demikian pembahasan mengenai aplikasi antrian berbasis web dengan suara (PHP MySQL), semoga bermanfaat

Salam

 

Jagowebdev

26 Feedback dari pembaca

  • Selamat siang mas, saya ingin bertanya beberapa hal terkait Aplikasi antrian berbasis web ini.
    1. Apakah tampilan gambar pada pengambilan nomor antrian bisa diganti-ganti? Misalnya background gambar dan tata letak tombol ambil antriannya apakah bisa di ubah ubah?
    2. Apakah video yang ditampilkan di layar monitor bisa hanya berupa link ke youtube? bisakah menggunakan file yang ada di pc, misal video yang ada di pc sendiri. dan apakah hanya berupa video saja? bisakah yang ditampilkan dilayar monitor itu berupa gambar dan suara dengan format mp3?
    3. PC yang digunakan untuk mengambil antrian (output layar antrian) apakah disatu pc yang sama dengan tampilan di layar monitor? (output layar monitor) Maksudnya adalah apakah layarnya itu di extend? Monitor 1 untuk output layar antrian dan monitor 2 untuk output layar monitor. Atau harus di 2 PC yang berbeda
    4. Apakah display yang ditampilkan di output layar monitor bisa diganti-ganti lagi? misal ingin menambahkan logo/gambar perusahaan.

    • 1. Yang bisa diganti color schemenya mas, misal seragam biru, seragam hijau, dll. Tombol ambil antriannya sesuai layout diatas, hanya saja nanti jumlah dan nama tombolnya sesuai dengan antrian yang dibuat. Untuk mengubah tata letak, background, dll, dapat dilakukan dengan mengedit html dan css nya
      2. Video yang ditampilkan bisa hanya link youtube, bisa menggunakan file yang di PC. Sementara belum bisa menampilkan gambar, solusinya gambar tersebut di buat file video.
      3. Bisa fleksibel mas, bisa ditampilkan pada monitor yang sama bisa di monitor yang berbeda
      4. Logo perusahaan, alamat, teks semua bisa diganti mas sesuai dengan kebutuhan pennguna

  • Pada bagian rekap antrian terdapat error itu ngatasinnya gimana mas.
    Codeigniter/View/Exceptions/ViewException
    Invalid file : themes/modern/antrian-rekap-form.php.
    Semua menu berjalan hanya rekap antrian yang bermasalah dan sudah ngikutin semua petunjuk pada panduan manualnya

  • untuk mengakses lewat localhost dari pc yang berbeda kok tidak bisa ya hnaya mentok di login saja

  • Auto Update data panggilan menggunakan plugin apa mas? apa itu perlu refresh page atau gimana?

  • selamat siang,
    aplikasi yang bagus mas, apakah ada pengembangan menggunakan database SQL SERVER ?
    kebetulan tempat kami sedang mengembangkan sistem antrian.
    matur nuwun mas.

  • Mas mau nanya, apakah aplikasi antriannya bisa di modifikasi seprti ini gak mas alur nya,
    PC loket antriannya akan di Buat Menu 3 Pilihan
    menu 1. Counter Costomer Service
    menu 2. Counter Verifikasi
    menu 3. Counter Pengambilan Berkas
    yg ingin saya tanyakan untuk yg menu Counter verifikasi nya aja mas, klw yg counter costomer service dan counter pengambilan berkas, hnya sekali antrian saja.
    jadi gini mas, pertama pemohon datang mengambil nomor antrian di PC loket antrian, lalu memilih menu counter verifikasi, lalu setelah mengambil nomor antrian verifikasi pemohon langsung antri ke counter verifikasi dan setelah dipanggil nomor nya, operator memeriksa dodument dan verifikasi berkas nya sudah lengkap, maka pemohon tinggal langsung ke counter wawancara,. tpi yg menentukan ke counter wawancara itu adalah operator nya counter verifikasi, karna klw dokumen verifikasi nya lengkap, tinggal lanjut ke counter wawancara, dengan mengklik/aprove dari menu nya counter verifikasi klw pemohon dipersilahkan lanjut ke counter verifikasi, tpi dilayar nya muncul klw pemohon tinggal nunggu panggilan selanjut nya di counter wawancara tanpa harus ngmbil antrian lagi di PC Loket antrian.

      • Gitu ya mas, jadi nnti menu nya itu ada di counter verifikasi ya mas? agar nanti nomor antriannya muncul di counter wawancaranya ? sehingga operator wawancara nya tinggal memanggil nomor nya aja ketika operator counter verifikasi nya menyetujui untuk selanjut nya ke counter wawancara.

        • Iya seperti itu mas bisanya, nanti counter verifikasi membuka aplikasi antrian kemudian mengambil antrian untuk counter wawancara, selanjutnya counter wawancara memanggil nomor antrian tersebut.

          Nomor antrian yang dipanggil harus urut juga dan tidak bisa loncat

Silakan tinggalkan komentar

Newsletter

Jadilah yang pertama tahu berita terbaru dari Jagowebdev.com