Panduan Lengkap: Membuat Aplikasi Catatan Modern dengan JavaScript, Bootstrap, dan LocalStorage

Selamat datang di panduan komprehensif ini! Pernahkah Anda ingin membangun aplikasi web fungsional yang dapat menyimpan data tanpa memerlukan backend server yang rumit? Jika ya, Anda berada di tempat yang tepat. Dalam tutorial ini, kita akan bersama-sama membuat aplikasi catatan (note-taking app) yang interaktif dan mudah digunakan dengan memanfaatkan tiga teknologi kunci: JavaScript untuk logikanya, Bootstrap untuk desain antarmuka yang responsif dan menarik, serta LocalStorage untuk menyimpan data catatan langsung di browser pengguna.

Aplikasi catatan adalah proyek awal yang sempurna untuk memahami bagaimana ketiga teknologi ini bekerja sama dalam ekosistem pengembangan frontend. Ini akan memberi Anda dasar yang kuat untuk membangun aplikasi web yang lebih kompleks di masa depan.

Persiapan Awal: Yang Anda Butuhkan

Sebelum memulai koding, pastikan Anda memiliki beberapa alat dasar yang diperlukan:

Editor Teks: Visual Studio Code (VS Code), Sublime Text, atau editor favorit Anda.
Web Browser: Google Chrome, Mozilla Firefox, atau lainnya untuk menguji aplikasi.
Pemahaman Dasar: Anda diharapkan memiliki pemahaman dasar tentang HTML, CSS, dan JavaScript.

1. Buat Folder

Buatlah sebuah folder baru dengan nama aplikasi_catatan di dalam folder documents, atau buat dengan nama dan posisi yang anda inginkan

2. Membuat File index.html

Di dalam folder catatan_aplikasi buatlah sebuah file baru dengan nama index.html. Copy script di bawah ini dan tempelkan di dalam file 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 Catatan Sederhana</title>
    <!-- Bootstrap CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body class="bg-light">
    <div class="container py-5">
        <h1 class="mb-4 text-center">Aplikasi Catatan Saya</h1>

        <!-- Form Tambah Catatan -->
        <div class="card mb-4">
            <div class="card-body">
                <form id="note-form">
                    <div class="mb-3">
                        <label for="note-input" class="form-label">Catatan Baru</label>
                        <textarea class="form-control" id="note-input" rows="3" placeholder="Tulis catatan Anda di sini..." required></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">Tambahkan Catatan</button>
                </form>
            </div>
        </div>

        <!-- Daftar Catatan -->
        <h2 class="mb-3">Daftar Catatan</h2>
        <div id="notes-list" class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3">
            <!-- Catatan akan dimuat di sini oleh JavaScript -->
            <p class="col text-muted">Belum ada catatan. Tambahkan catatan pertama Anda!</p>
        </div>
    </div>

    <!-- Bootstrap JS CDN (bundle with Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <!-- Custom JavaScript -->
    <script src="script.js" defer></script>
</body>
</html>

Jalankan aplikasi, klik file kanan pada file index.html lalu pilih open with browser. Maka tampilannya akan tampak seperti gambar di bawah ini. Tapi ini baru tampilan saja, anda perlu mengikuti tahapan berikutnya agar data dapat disimpan ke database.

3. Membuat File script.js

Buatlah file baru di dalam folder aplikasi_catatan dengan nama script.js. File ini berisi fungsi mengambil data dari database dan menampilkannya, fungsi menyimpan dan menghapus data. Ikuti tahapannya berikut ini.

3.1 Mengambil Data

Pertama kita akan membuat variabel penampung data dan mengambil data dari database local storage. Copy script di bawah ini dan tempelkan di dalam file script.js


// script.js

const noteForm = document.getElementById('note-form');
const noteInput = document.getElementById('note-input');
const notesList = document.getElementById('notes-list');

let notes = []; // Array untuk menyimpan semua catatan

// Fungsi untuk memuat catatan dari LocalStorage
function loadNotes() {
    const storedNotes = localStorage.getItem('notes');
    if (storedNotes) {
        notes = JSON.parse(storedNotes);
    }
    renderNotes(); // Tampilkan catatan setelah dimuat
}

// Panggil saat halaman dimuat
document.addEventListener('DOMContentLoaded', loadNotes);

3.2 Menambahkan Catatan Baru (Create)

Selanjutnya kita akan membuat fungsi untuk menyimpan data. Copy script di bawah ini dan tempelkan di dalam file script.js di bagian paling bawah setelah script sebelumnya.


// script.js (lanjutan)

// Fungsi untuk menambahkan catatan baru
noteForm.addEventListener('submit', function(event) {
    event.preventDefault(); // Mencegah reload halaman
    
    const noteText = noteInput.value.trim();
    if (noteText === '') {
        alert('Catatan tidak boleh kosong!');
        return;
    }

    const newNote = {
        id: Date.now().toString(), // ID unik berdasarkan timestamp
        text: noteText,
        timestamp: new Date().toLocaleString()
    };

    notes.push(newNote);
    saveNotes(); // Simpan ke LocalStorage
    renderNotes(); // Perbarui tampilan
    noteInput.value = ''; // Kosongkan input
});

3.3 Menampilkan Catatan (Read)

Selanjutnya kita perlu membuat fungsi untuk menampilkan data. Silahkan anda copy script di bawah ini dan tempelkan di dalam file script.js di bagian paling bawah setelah script sebelumnya.


// script.js (lanjutan)

// Fungsi untuk menyimpan catatan ke LocalStorage
function saveNotes() {
    localStorage.setItem('notes', JSON.stringify(notes));
}

// Fungsi untuk menampilkan (render) semua catatan
function renderNotes() {
    notesList.innerHTML = ''; // Bersihkan daftar catatan sebelumnya

    if (notes.length === 0) {
        notesList.innerHTML = '<p class="col text-muted">Belum ada catatan. Tambahkan catatan pertama Anda!</p>';
        return;
    }

    notes.forEach(note => {
        const noteCard = `
            <div class="col">
                <div class="card shadow-sm note-item">
                    <div class="card-body">
                        <p class="card-text">${note.text}</p>
                        <small class="text-muted d-block mb-2">Dibuat: ${note.timestamp}</small>
                        <button class="btn btn-danger btn-sm" data-id="${note.id}" onclick="deleteNote(this)">Hapus</button>
                    </div>
                </div>
            </div>
        `;
        notesList.innerHTML += noteCard;
    });
}

3.4 Menghapus Catatan (Delete)

Selanjutnya kita perlu membuat fungsi untuk menghapus data. Silahkan anda copy script di bawah ini dan tempelkan di dalam file script.js di bagian paling bawah setelah script sebelumnya.


// script.js (lanjutan)

// Fungsi untuk menghapus catatan
function deleteNote(buttonElement) {
    const noteIdToDelete = buttonElement.dataset.id;
    notes = notes.filter(note => note.id !== noteIdToDelete); // Filter array
    saveNotes(); // Simpan array yang diperbarui
    renderNotes(); // Perbarui tampilan
}

Semua script sudah kita buat, selanjutnya uji coba fungsi create, read, dan delete. Silahkan anda reload kembali halaman index.html yang telah anda buka di browser sebelumnya, dan coba jalankan.

Kesimpulan

Selamat! Anda telah berhasil membangun aplikasi catatan sederhana namun fungsional menggunakan JavaScript untuk logika, Bootstrap untuk desain responsif, dan LocalStorage untuk penyimpanan data persisten sisi klien. Proyek ini mendemonstrasikan bagaimana ketiga teknologi frontend ini dapat digabungkan untuk menciptakan pengalaman pengguna yang mulus tanpa kompleksitas server-side.