Latest News

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


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






24 comments:

  1. selamat pagi.
    boleh copy source codenya tidak min ?

    ReplyDelete
  2. mohon source codenya di kirim ke email saya ?

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  3. admin, saya boleh minta source codenya di kirim ke e-mail saya..
    dani.istianto@gmail.com

    ReplyDelete
    Replies
    1. file source code sudah dikirim ke alamat email anda....terima kasih

      Delete
    2. admin, aku juga minta dong source codenya di kirim ke email saya
      4damstido@gmail.com

      Delete
  4. Artikel yang menarik dan mendidik....
    Jika tidak keberatan mohon kirim souce code ke
    nenyswt@gmail.com
    Terima kasih

    ReplyDelete
  5. Boleh minta source code nya kirim ke e-mail saya.
    erwandiiwan@gmail.com
    Thanks

    ReplyDelete
  6. boleh dong min sourcenya ke sahidassidiq14@gmail.com

    ReplyDelete
  7. Boleh minta source code nya kirim ke e-mail saya. winadisetya@gmail.com thx

    ReplyDelete
  8. Link download dan video demo sudah ada....

    ReplyDelete
  9. Izin source codenya pak, tulushadi@gmail.com

    ReplyDelete
  10. gan, jika menggunakan 2 loket itu gmana ya gan??

    ReplyDelete
  11. assalamualaikum, mohon kirim source codenya ke email saya kurnianto.syaputra@gmail.com jika berkenan

    ReplyDelete
  12. maaf apakah boleh meminta file code nya ?
    terima kasih
    ynnrny@gmail.com

    ReplyDelete
  13. link sudah diperbaiki, bisa didownload sekarang...mks

    ReplyDelete
  14. ini password rar nya apa?? di exctrat kk mintak password

    ReplyDelete
  15. Mas, saya sedang belajar coding. apakah berkenan jika saya meminta source code nya mas.
    email saya : keanue.putra@gmail.com
    dan kalau boleh minta password file rar nya juga mas.

    ReplyDelete
  16. maaf min, saya juga lagi nyari referensi untuk pemanggilan audio visual untuk antrian, kalo boleh minta source code via email : andariasito@gmail.com
    trimaksih min,

    ReplyDelete
  17. bisa minta source kodenya min?

    ReplyDelete
  18. minta source code gan kirim ke email mensade01@gmail.com

    ReplyDelete
  19. minta source codenya kak kirim ke dikhalistyowati@gmail.com

    ReplyDelete