Halo teman-teman selamat datang di blog saya. hari ini saya mau share aplikasi nomor atrian sederhana yang berbasis web base. Aplikasi ini saya buat terinpirasi waktu saya datang ke salah satu perbankan nasional untuk ganti ATM expired, yang mana hari itu aplikasinya antriannya error sehingga tidak bisa dipakai, karena itu cukup menyulitkan bagi mengetahui berapa banyak lagi yang antri sebelum saya.
Aplikasi yang saya buat cukup sederhana dapat menampilkan nomor antrian terakhir pada masing-masing loket, untuk merubah nomor antrian user dapat menekan tombol yang ada sesuai conternya dan aplikasi langsung otomatis merubah nomor antrian dan memanggil nomor antrian tersebut.
Descprisi feature aplikasi
- Dapat menampilkan nomor antrian terakhir masing-masing loket layaran.
- Terdapat button masing-masing loket untuk merubah nomor antrian
- Untuk nomor antrian terakhir yang di panggil tampilkan lebih besar
- Setiap button di klik mengeluarkan suara nomor antrian terakhir dan mengarahkan ke loket yang sesuai.
- Button reset
Button recall untuk nomor antrian terakhir (next adjustment)Simpan session aplikasi agar tidak hilang saat di refresh (next adjustment)
Mari kita mulai membuat aplikasi kita.
Pertama mari kita buat folder untuk aplikasi kita. setelah itu silahkan buka menggunakan editor kesayangan anda, disini saya menggunakan vscode.
lanjut kita buat file index.html, style.css dan apps.js.
Pada file index html langsung kita integrasikan dengan file html dan css yang kita buat sebelumnya, next kita buat element html sesuai kebutuhan.
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Aplikasi Antrian</title>
<link rel="stylesheet" href="./assets/css/style.css" /> //include file css
</head>
<body>
<header></header>
<div id="contens">
<div class="card loket-active">
<p>LOKET 01</p>
<h1>--</h1>
</div>
<div class="card">
<p>LOKET 02</p>
<h1>--</h1>
</div>
<div class="card">
<p>LOKET 03</p>
<h1>--</h1>
</div>
</div>
<div id="actions">
<button id="loket_1"><span>Loket 1 </span>PUSH</button>
<button id="loket_2"><span>Loket 2 </span>PUSH</button>
<button id="loket_3"><span>Loket 3 </span>PUSH</button>
<button id="reset">RESET</button>
</div>
<script src="./assets/js/apps.js"></script> //include file js
</body>
</html>Setelah itu kita lanjut ke file css agar tampilan html kita lebih rapi.
body {
background: #3af5bd;
height: 100vh;
width: 100%;
max-width: 100vw;
overflow-x: hidden;
overflow-y: hidden;
/* position: absolute; */
top: 0;
left: 0;
}
#contens {
height: 80vh;
margin: 10px;
padding: 10px;
border: 5px double #000;
display: grid;
grid-template-columns: 1fr 0.5fr;
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 10px;
grid-row-gap: 0px;
gap: 10px;
grid-template-areas:
'loket-active loket-side'
'loket-active loket-side';
/* grid-template-areas:
'loket-1 loket-2'
'loket-1 loket-3'; */
}
.card {
display: flex;
flex-direction: column;
align-items: center;
border: 1px dashed #000;
width: 100%;
height: 100%;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: rgb(158, 227, 230);
}
.card p {
font-size: 3em;
font-weight: bolder;
}
.card h1 {
font-size: 10em;
font-weight: bold;
}
.loket-side {
grid-area: loket-side;
}
.loket-active {
grid-area: loket-active;
}
.loket-active h1 {
margin-top: 20px;
font-size: 20em;
font-weight: bolder;
}
.loket-active p {
font-size: 5em;
font-weight: bolder;
}
button {
padding: 5px;
background-color: green;
font-size: large;
margin: 10px;
}
#reset {
background-color: yellowgreen;
position: absolute;
right: 0;
/* bottom: 5px; */
}Setelah selesai mari kita coba aplikasi kita, tampilannya seharunsya seperti dibawah ini.
jika inggin menggunakan warna dan font lain silahkan di sesuaikan pada file cssnya.
setelah aplikasi tampilan kita sudah selesai, setiap button yang ada masih belum berfungsi. agar dapat berfungsi mari kita buat logicnya pada file apps.js kita.
Kita akan membuat variabel dan function untuk menghandel aplikasi kita.
Variabel yang kita butuhkan adalah variable untuk menampung nomor antrian terakhir dan nomor antrian terkahir masing-masing loket. dan function counterAntrian untuk mengupdate nomor antrian dengan menambahkan +1 .
const noAntrian = [0, 0, 0];
let antrian = 0;
// kita buat function untuk menambahkan nilai + 1 pada nomor antrian
function counterAntrian(num) {
return (antrian = num + 1);
}setalah itu mari lanjut dengan membuat function rederUi agar dapat menampilkan nomor antrian berdasarkan data dari function yang kita buat sebelumnya, jika params di kirim maka akan menampilkan pada counter yang sesuai, contoh kita .
Contoh code lengkap seperti dibawah ini.
const noAntrian = [0, 0, 0];
let antrian = 0;
const card = document.getElementsByClassName('card');
function updateNoAntrian() {
const actions = document.getElementById('actions');
actions.querySelectorAll('button').forEach((button) => {
button.addEventListener('click', function () {
if (this.id == 'reset') {
location.reload(true);
} else {
const noConter = this.id.slice(-1);
renderUi(noConter - 1);
playSound(noConter, antrian);
}
});
});
}
function playSound(loket, number) {
const message = `Nomor Antrian ${number} untuk Loket ${loket}`;
const speech = new SpeechSynthesisUtterance(message);
speech.lang = 'id-ID'; // Set language to Indonesian
speechSynthesis.speak(speech);
}
function renderUi(params) {
noAntrian[params] = counterAntrian(antrian);
let lastCounterActive = noAntrian.indexOf(Math.max(...noAntrian));
noAntrian.forEach((e, i) => {
if (lastCounterActive === i) {
card[i].className = 'card loket-active';
} else {
card[i].className = 'card';
}
card[i].children[0].innerHTML = `LOKET 0${i + 1}`;
card[i].children[1].innerHTML = noAntrian[i];
});
}
function counterAntrian(num) {
return (antrian = num + 1);
}
updateNoAntrian();Tampilan akhir aplikasi kita akan seperti dibawah ini.
selamat, kita sudah berhasil membuat aplikasi sederhana membuat nomor antrian sederhana berbasis web base.
Demo Aplikasi bisa kunjungi link berikut : Aplikasi Antrian
Repo : mini-projects/Aplikasi Nomor Antrian Sederhana at master · fredysiswanto/mini-projects
