|
| Tampilan Web |
Desikripsi
Rent Car Manager adalah website untuk simulasi rental mobil.
Website ini menggunakan LocalStorage untuk menyimpan data mobil, artinya data
disimpan di browser dan bisa diakses kembali walaupun user keluar dari web
tersebut. Di website ini user dapat memanipulasi data mobil dalam LocalStorage
seperti menambah, edit, dan menghapus. Website ini dibuat menggunakan HTML,
CSS, dan Javascript.
Source code dan Live Demo Rent Car Manager bisa diakses di
Github Repository serta
Github Pages
berikut.
Fitur
Sidebar
Salah satu fitur website ini adalah sidebar yang berfungsi untuk mengakses
tiap halaman (page) dalam web ini. Sebenarnya struktur utama website terbagi
menjadi dua, yakni
<aside>
untuk bagian sidebar dan
<main>
untuk bagian menampilkan konten halaman. Halaman terbuat
<div>
yang berada di dalam
<main>. Untuk menampilkan halaman, hanya perlu memberi 'display block' pada halaman yang ingin ditampilkan lalu 'display none' untuk halaman lainnya. Fungsionalitas tersebut bisa kita implementasikan di
Javascript lalu kita kaitkan pada
button yang ada di sidebar.
document.addEventListener('click', function(e) {
let target = e.target;
switch (true) {
// ...
case target.closest('aside nav button') !== null:
changePage(target);
break;
// ...
}
});
const buttons = document.querySelectorAll('aside nav button');
function changePage(target) {
let clickedButton = target.closest('button');
if (clickedButton) {
buttons.forEach(btn => {
btn.classList.remove('active');
});
clickedButton.classList.add('active');
toggleAside();
showActivePage();
}
}
const pages = document.querySelectorAll('main > div.mainContent div.page');
function showActivePage() {
pages.forEach((page, index) => {
if (buttons[index].classList.contains('active')) {
page.style.display = 'block';
} else {
page.style.display = 'none';
}
});
}
showActivePage();
Kode di atas digunakan untuk menampilkan halaman sesuai
button yang ditekan. Pertama
daripada menambahkan 'event listener' untuk setiap button di
sidebar, kita taruh 'event listener' pada document. Ketika cursor
menekan sesuatu di website, variabel
target akan menyimpan elemen
yang ditekan kemudian melakukan pengecekan menggunakan 'switch statement', jika elemen target sesuai kriteria (contohnya elemen yang ditekan
merupakan button dengan
class tertentu) maka akan
menjalankan suatu kode. Hal ini dinamakan
document event delegation.
Kode yang dijalankan berupa function bernama
changePage(target). Parameter
target adalah elemen button yang di klik. Function ini bertujuan menambahkan
class 'active' untuk
button yang ditekan dan
menghapus class 'active' di
button lainnya. Kemudian
function ini menjalankan dua function lainnya yakni
toggleAside() (Digunakan nanti
di Mobile responsive) dan
showActivePage().
Function showActivePage() befungsi menampilkan halaman sesuai urutan
button yang memiliki
class 'active' karena di HTML
urutan button dan halaman berkaitan. Contohnya
button urutan 1 bila diberi
class 'active' akan menampilkan
halaman di urutan 1, dan seterusnya. Cara menampilkannya adalah dengan
memberikan
'display block' serta
'display none' untuk
menyembunyikan halaman lain.
Mobile Responsive
|
| Mobile Sidebar Toggle |
Fitur yang dibuat Mobile Responsive di website ini adalah menyembunyikan
sidebar dan menambahkan navbar untuk mengakses sidebar tersebut. Bisa
diperoleh menggunakan CSS Media Query, yang berfungsi mengaplikasikan style
CSS ketika lebar layar device lebih atau kurang dari batas yang telah
ditentukan.
@media screen and (max-width: 1290px) {
/* Insert Mobile Styling... */
}
Untuk menampilkan sidebar, di
CSS elemen yang berkaitan
dengan sidebar contohnya
button di navbar, backdrop
ketika sidebar dibuka, dan sidebar itu sendiri diberi
class 'sidebar-open'. Lalu
tambahkan styling pada elemen yang memiliki
class 'sidebar-open'. Kemudian
di Javascript buat function untuk "toggle" pemberian
class 'sidebar-open' pada
elemen tersebut.
document.addEventListener('click', function(e) { // document event delegation
let target = e.target;
switch (true) {
case target.closest('.navbar button, button.closeSidebar') !== null:
toggleAside();
break;
// ...
}
});
function toggleAside() {
document.querySelector('aside').classList.toggle('sidebar-open');
document.querySelector('.navbar').classList.toggle('sidebar-open');
document.querySelector('.backdrop').classList.toggle('sidebar-open');
}
Homepage
|
| Tampilan Homepage |
Fitur pertama dalam homepage adalah menampilkan waktu (sesuai konfigurasi waktu di device). Caranya menggunakan object Date untuk mendapatkan waktu saat ini dan function bawaan setInterval() untuk menjalankan suatu kode setiap beberapa milidetik.
const tanggalDisplay = document.querySelectorAll('.tanggalDisplay');
function displayDate() {
let date = new Date;
let dateFormat = date.toLocaleDateString("id-ID", {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
});
let timeFormat = date.toLocaleTimeString([], { hour12: false });
tanggalDisplay.forEach(display =>
display.textContent = `${dateFormat} | ${timeFormat}`
);
}
displayDate();
setInterval(function() {
displayDate();
}, 1000);
Fitur selanjutnya adalah menampilkan banyak data mobil dan menampilkan tiap data mobil yang ada di LocalStorage dalam bentuk table. Bisa gunakan javascript untuk memperoleh data dari LocalStorage lalu hitung berapa banyak data tersebut menggunakan method '.length'. Untuk table sendiri, bisa membuat function untuk iterasi setiap data yang ada di LocalStorage lalu setiap data yang diiterasi dimasukkan ke dalam <td> (table data/table cells) kemudian <tr> (table row) dan terakhir ditambahkan ke elemen table tersebut.
function saveLocalStorage(key, data) { // function menyimpan data ke LocalStorage
localStorage.setItem(key, JSON.stringify(data));
}
function retrieveLocalStorage(key) { // function mendapat data dari LocalStorage
const data = localStorage.getItem(key);
return data ? JSON.parse(data) : [];
}
// ...
function updateDataTotalTable(data) { // Function menampilkan jumlah data mobil
// ...
}
function generateDatabaseTable(data) { // Function membuat rows data pada table
// ...
}
function renderHomeTable(data) { // function render jumlah data dan table
// ...
}
|
| Button LocalStorage |
Di bawah table terdapat dua
button. Pertama berfungsi
menambahkan 'dummy data' (data palsu) ke dalam
LocalStorage dan yang kedua
menghapus semua data di
LocalStorage. Fungsionalitas
button pertama bisa diraih
dengan cara retrieve data dari
LocalStorage kemudian data
LocalStorage digabung
(concatenation) dengan dummy data yang telah dibuat. Untuk
button kedua bisa menggunakan method
localStorage.removeItem().
const DummyCarsData = [
{ name: "Toyota Camry", status: "available", type: "Sedan", price: 700000, img: "https://www.motortrend.com/uploads/sites/10/2021/02/2021-toyota-camry-se-sedan-angular-front.png" },
// ...
{ name: "M1 Abrams", status: "booked", type: "Other", price: 66981960000, img: "https://upload.wikimedia.org/wikipedia/commons/b/b9/Abrams-transparent.png", user:{fullname: "Rahmat", email: "pentagon@gov.us", tel: "+1 273 1935", date: ["2001-10-29","2001-11-11"], driver: false, totalDays: "13 Hari", totalPrice: 870765480000} }
];
// ...
function addDummyData() { // menambahkan dummy data
let data = retrieveLocalStorage('carData');
let addedData = [...data, ...DummyCarsData];
saveLocalStorage('carData', addedData);
renderEverything();
}
function clearLocalStorage() { // hapus semua data di LocalStorage
localStorage.removeItem('carData');
renderEverything();
}
Rent Car Page
|
| Tampilan Rent Car |
Rent Car adalah salah satu halaman yang berfungsi menampilkan mobil yang
berstatus "tersedia" atau "available" di data LocalStorage. Mobil
yang berstatus "available" bisa disewa oleh user dan setelah disewa
akan berstatus "booked". Selain itu di halaman ini user bisa menambah
mobil baru dan mengedit data mobil.
Setiap list mobil di-generate di dalam Javascript. Lalu setelah di-generate,
setiap mobil dimasukkan ke dalam halaman (page) sesuai dengan status mobil
tersebut. Berikut kode javascriptnya.
function generateCarCard(data, index) {
// ...
return cardDiv;
}
const availableCarList = document.querySelector('.availableCarList');
const bookedCarList = document.querySelector('.bookedCarList');
const unavailableCarList = document.querySelector('.unavailableCarList');
function renderCarList(data) {
[availableCarList, bookedCarList, unavailableCarList].forEach(list => list.innerHTML = ''); // Clear Cards
data.forEach((car, index) => {
const carCard = generateCarCard(car, index);
switch (car.status) {
case 'available':
availableCarList.appendChild(carCard);
break;
case 'booked':
bookedCarList.appendChild(carCard);
break;
case 'unavailable':
unavailableCarList.appendChild(carCard);
break;
default:
console.error(`Unknown status: ${car.status}`);
}
});
}
Klik button "Tambahkan Mobil
Baru" akan menampilkan
<dialog> untuk user menambahkan mobil baru ke data
LocalStorage.
|
| Dialog menu "Tambahkan Mobil Baru" |
Klik icon "pena menulis" untuk mengedit data mobil yang dipilih. Di edit
<dialog>
user bisa mengubah nama, harga, link gambar, dan status mobil. Selain itu
user juga bisa menghapus data mobil dari
LocalStorage dengan menekan
button "Hapus Mobil".
|
| Dialog Menu "Edit Data Mobil" |
Klik button "Sewa mobil" untuk menyewa mobil tersebut. Kemudian akan
ditampilkan
<dialog>
yang berisi form pengisian data penyewa. User bisa melihat total harga dan
hari terkalkulasi secara otomatis.
|
| Dialog menu "Sewa Mobil" |
Booked Car Page
|
| Tampilan Booked Car |
Booked Car adalah halaman untuk menampilkan list data mobil yang berstatus
"booked" atau "disewa". Di halaman ini user dapat melihat berapa
banyak mobil yang tersewa dan melihat detail penyewa dengan menekan
button "Detail Mobil".
|
| Dialog "Detail Mobil" |
Akan muncul
<dialog>
yang memperlihatkan semua detail mobil, penyewa, tanggal, dan harga. User
bisa menekan
button "Kembalikan Mobil"
untuk mengembalikan mobil kembali ke status "available".
Unavailable Car Page
|
| Tampilan Unavailable Car |
Unavailable Car adalah halaman untuk menampilkan list data mobil yang
berstatus "unavailable" atau "tidak tersedia". Di halaman ini user
dapat mengedit data mobil dengan menekan icon "pena menulis" atau ubah
status kembali ke "available" dengan menekan
button "Set Status
Available".
Rental History
|
| Tampilan Rental History |
Rental History adalah halaman untuk menampilkan perubahan yang terjadi pada
data mobil di LocalStorage.
Perubahan mencakup penambahan mobil baru, edit data, pengapusan, dan
perubahan status data mobil. Perlu diingat bahwa history catatan
tidak disimpan secara permanen, jadi jika user keluar dari web,
history akan ter-reset.
Berikut kode Javascript untuk menambahkan rows ke table
history. Kode ini merupakan function yang mengambil dua parameter,
yakni status atau pesan
perubahan (contohnya "Added", "Deleted", dll) dan
name yakni nama mobil
tersebut.
const historyTableTBODY = document.querySelector('.historyTable tbody');
function addHistory(status, name) {
let tr = document.createElement('tr');
let tdNo = document.createElement('td');
tdNo.textContent = historyTableTBODY.children.length + 1;
let tdNama = document.createElement('td');
tdNama.textContent = name;
let tdStatus = document.createElement('td');
tdStatus.textContent = status;
let tdWaktu = document.createElement('td');
let currentTime = new Date;
currentTime = currentTime.toLocaleTimeString([], { hour12: false })
tdWaktu.textContent = currentTime;
[tdNo, tdNama, tdStatus, tdWaktu].forEach(td => tr.appendChild(td));
historyTableTBODY.appendChild(tr);
}
0 Komentar