Cara Membuat Aplikasi Input Data dengan HTML, CSS, dan JavaScript

 Dalam dunia teknologi, membuat aplikasi sederhana adalah langkah awal untuk memahami konsep pengembangan aplikasi. Pada artikel ini, Anda akan belajar cara membuat aplikasi input data menggunakan HTML, CSS, dan JavaScript. Proyek ini cocok untuk pemula yang ingin mengasah keterampilan coding mereka.

---

Apa itu Aplikasi Input Data?

Aplikasi input data adalah sebuah antarmuka yang memungkinkan pengguna untuk memasukkan, menyimpan, dan mengelola informasi. Misalnya, Anda dapat mencatat data pekerjaan harian, tugas sekolah, atau catatan keuangan. Proyek ini melibatkan elemen-elemen seperti formulir, penyimpanan lokal (local storage), dan fungsi interaktif.

---

Langkah-langkah Membuat Aplikasi Input Data

1. Struktur HTML

HTML (HyperText Markup Language) digunakan untuk membuat kerangka dasar aplikasi. Berikut adalah elemen-elemen penting dalam aplikasi ini:

• Formulir Input: Formulir digunakan untuk memasukkan data seperti judul, tanggal, dan jumlah.
• Div Container: Div digunakan untuk menampilkan daftar data yang sudah dimasukkan.

html
<div class="wrapper">
    <div class="container">
        <h2 class="text-center">Masukan Data</h2>
        <form id="form">
            <div class="form-group">
                <label for="title">Data</label>
                <input id="title" name="title" type="text" required />
            </div>
            <div class="form-group">
                <label for="date">Tanggal</label>
                <input id="date" name="date" type="date" required />
            </div>
            <div class="form-group">
                <label for="author">Jumlah</label>
                <input id="author" name="author" type="number" required />
            </div>
            <input class="btn-submit" type="submit" value="Submit" />
        </form>
    </div>
    <div class="container">
        <h2>Data Belum Selesai</h2>
        <div id="books"></div>
    </div>
    <div class="container">
        <h2>Data Selesai</h2>
        <div id="completed-books"></div>
    </div>
</div>

---

2. Styling dengan CSS

CSS (Cascading Style Sheets) memberikan tampilan menarik pada aplikasi. Gunakan CSS untuk menciptakan antarmuka yang responsif dan ramah pengguna.

css
body {
    font-family: 'Raleway', sans-serif;
    background-color: skyblue;
    margin: 0;
    padding: 0;
}

.wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container {
    background: black;
    color: white;
    border-radius: 8px;
    padding: 16px;
    margin: 16px;
    width: 80%;
    max-width: 800px;
}

Elemen tombol juga diberi efek hover untuk memberikan pengalaman pengguna yang lebih baik.

css
.btn-submit {
    background: goldenrod;
    color: black;
    border: 2px solid goldenrod;
    border-radius: 8px;
    padding: 8px 16px;
    cursor: pointer;
}

.btn-submit:hover {
    background: black;
    color: white;
}

---

3. Fungsi Interaktif dengan JavaScript

JavaScript memberikan fungsi interaktif pada aplikasi, seperti menyimpan data ke local storage dan menampilkan daftar data.

Menyimpan Data

Data yang dimasukkan oleh pengguna disimpan di local storage menggunakan fungsi saveData().

javascript
let books = [];
function saveData() {
    const serializedData = JSON.stringify(books);
    localStorage.setItem('BOOK_APPS', serializedData);
}

Menambahkan Data

Ketika pengguna mengklik tombol submit, data baru ditambahkan ke daftar dan ditampilkan di layar.

javascript
function addBook() {
    const title = document.getElementById("title").value;
    const date = document.getElementById("date").value;
    const author = document.getElementById("author").value;

    const bookObject = { id: +new Date(), title, date, author, isCompleted: false };
    books.push(bookObject);

    saveData();
    renderBooks();
}

Menyelesaikan dan Menghapus Data

Pengguna dapat memindahkan data ke kategori "Selesai" atau menghapusnya.

javascript
function markAsCompleted(bookId) {
    const book = books.find((b) => b.id === bookId);
    book.isCompleted = true;
    saveData();
    renderBooks();
}

function deleteBook(bookId) {
    books = books.filter((b) => b.id !== bookId);
    saveData();
    renderBooks();
}

Menyegarkan Tampilan

Fungsi renderBooks() digunakan untuk memperbarui daftar data di layar.

javascript
function renderBooks() {
    const uncompletedContainer = document.getElementById("books");
    const completedContainer = document.getElementById("completed-books");

    uncompletedContainer.innerHTML = '';
    completedContainer.innerHTML = '';

    books.forEach((book) => {
        const bookElement = document.createElement("div");
        bookElement.innerHTML = `
            <h2>${book.title}</h2>
            <p>${book.date}</p>
            <p>${book.author}</p>
        `;
        bookElement.classList.add("book-item");

        if (book.isCompleted) {
            completedContainer.append(bookElement);
        } else {
            uncompletedContainer.append(bookElement);
        }
    });
}

---

Keunggulan Aplikasi Input Data

1. Fleksibilitas: Dapat digunakan untuk berbagai keperluan, seperti manajemen tugas atau pencatatan keuangan.
2. Interaktif: Dengan JavaScript, aplikasi menjadi lebih dinamis dan interaktif.
3. Penyimpanan Lokal: Data tersimpan di local storage sehingga tidak hilang ketika halaman dimuat ulang.

---

Kesimpulan

Membuat aplikasi input data dengan HTML, CSS, dan JavaScript adalah langkah awal yang bagus untuk belajar pengembangan web. Dengan mempraktikkan proyek ini, Anda tidak hanya memahami dasar-dasar coding tetapi juga cara membuat aplikasi yang berguna. Jangan ragu untuk mencoba dan menyesuaikan aplikasi ini sesuai kebutuhan Anda!