Pembuatan
Aplikasi Manajemen Antrian (AMA)
Aplikasi ini cocok diterapkan di kantor-kantor layanan publik, seperti Kantor pembiayaan, Bank, Kantor Pos, pelayanan pajak, Puskesmas dan lain-lain, yang membutuhkan banyak antrian agar dapat tertata dengan rapi dan terkontrol.
aplikasi ini tidak hanya dapat menampilkan nomor antrian dengan suara panggilan, namun juga dapat menampilkan informasi dan gambar secara terpadu.
Untuk back end/Panel (admin)
Sebelum kita membuat aplikasi
untuk front end, terlebih dulu kita buat bagian back end dari aplikasi.
Aplikasi back end adalah halaman yang diakses oleh admin yaitu di: localhost/ama/panel.
Cara pembuatan backend (panel)
adalah dengan teknik CRUD (Create,
Read Update dan Delate), baca teknik CRUD
di file terpisah. Namun disini saya
jelaskan cara membuat editor tiny MCPUK yang berguna untuk melakukan penambahan
konten informasi bentuk HTML tanpa perlu menghapal kode langsung HTML
degenerate.
Download file tinymcpuk, copy kan ke root selanjutnya membuat form tambah
informasi di tambahinfo.php, kemudian
tambahkan kode Javascript pada bagian tag <head> untuk menampilkan editor
tinyMCPUK, berikut script nya:
Editor
tinyMCPUK juga diterapkan pada form-form lainnya, seperti ubahinfo.php, tambahticker.php
dan ubahticker.php.
Pembuatan Front End
Aplikasi Manajemen Antrian Berbasis Web
Setelah membuat aplikasi untuk
backend, maka selanjutnya membuat aplikasi untuk front end. Caranya adalah
membuat dulu tampilan (layout) front end dengan dreamweaver, notepad atau editor
html lainnya untuk merancang tata letak tampilan pada front end, kemudian
simpan ke dalam file index.php.
Skrip index.php :
Apabila anda perhatikan penamaan
id pada skrip index.php, setiap bagiannya (div) akan mengacu pada layout yang
telah dirancang. Seperti biasa setelah membuat pondasi atau tampilan yang akan
dibangun, selanjutnya untuk memperindah dan mempercantik tampilan dan
pemformatan lebih mudah, maka kita bisa menggunakan file css baru dengan nama
file style.css
Skrip style.css
:
Selanjutnya gunakan plug-in untuk
menampilkan jam analog di sebelah kiri atas halaman. Untuk itu download file
plug-in moreskin.js dan coolclock.js ke dalam root, lalu
tambahkan kode pada bagian tag <head> di skrip index.php berikut:
Selanjutnya
masih di skrip index.php,
tambahkan kode berikut di dalam tag div dengan id=”jam”, berikut :
Maka,
setelah dijalankan melalui browser, di localhost/ama, maka hasilnya akan terlihat
berikut :
Sedangkan
nomor dan suara antrian dapat disisipkan
di bagian tag <body> masih di skrip index.php, dengan skrip HTML 5
berikut ini :
Dan
untuk menampilkan nomor panggilan dan tombol panggil, sisipkan file css, pada
<div class=”kontainer”> dan <div class=”kontainer2”> , seperti
skrip index.php berikut:
Setelah
dijalankan di browser akan tampak berikut.
Untuk menampilkan informasi data
dari tabel informasi yang akan ditampilkan dalam beberapa waktu dan mengambil
informasi setiap beberapa detik sekali menggunakan jQuery, ini diatur di file response.php.
Skrip response.php
Maka setelah dijalankan di
browser, akan menampilkan informasi secara bergantian (refresh) secara otomatis
pada isi (div badan) dalam interval waktu tertentu, sesuai dengan “lama”/durasi
waktunya. Jika “lama” diisi =5000, maka waktu lama durasinya = 5 detik.
Ticker
Pada bagian akhir adalah membuat bagian ticker,
yaitu informasi teks berjalan di bagian bawah halaman web (footer), yaitu
dengan menambahkan kode berikut di bagian tag div “ticker” di skrip index.php,
link Download Program + Database
Demo Program :
=========== SELAMAT BELAJAR SEMOGA SUKSES….!!! ==========
====== PERCAYA DIRI ADALAH MODAL
UTAMA, PASTI ANDA LULUS=====
====== PERCAYA DIRI SAJA OMONG
KOSONG TANPA KUASAI MATERI=====
=====PENGUJI TIDAK MAU TAHU ANDA
BUAT SENDIRI ATAU DIBUATKAN, YANG PENTING KUASAI MATERI DAN SELALU BERDO’A
MUDAH-MUDAHAN SELALU DIMUDAHKAN ===========
By : Ahmad Fathan, ST, S.Pd
Email: ahmadfathan75@gmail.com
Posts
