Sunday 15 February 2015

Manajemen Antrian dan Suara berbasis Web

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

DOWNLOAD

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