Home
Website

Menambahkan Fitur Pencarian Koleksi - Web Perpustakaan #Part 2

Menambahkan Fitur Pencarian Koleksi - Web Perpustakaan #Part 2 | UKK RPL

Menambahkan Fitur Pencarian Koleksi

Kita akan menambahkan form pencarian di atas koleksi buku dan menggunakan JavaScript sederhana untuk melakukan pencarian.

Perubahan pada index.html

<!-- Start Code HTML Index -->
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Perpustakaan Digital</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Perpustakaan Digital</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="koleksi.html">Koleksi</a></li>
                <li><a href="tentang.html">Tentang Kami</a></li>
                <li><a href="kontak.html">Kontak</a></li>
            </ul>
        </nav>
    </header>
    <section id="hero">
        <h2>Selamat Datang di Perpustakaan Digital</h2>
        <p>Akses ribuan buku secara online di perpustakaan kami.</p>
        <a href="koleksi.html" class="btn">Lihat Koleksi</a>
    </section>
    <section id="collection">
        <h3>Koleksi Terbaru</h3>
        <!-- Form Pencarian -->
        <div id="search-bar">
            <input type="text" id="search-input" placeholder="Cari judul buku...">
            <button onclick="searchBooks()">Cari</button>
        </div>
        <!-- Daftar Buku -->
        <div class="book-list" id="book-list">
            <div class="book">
                <img src="book1.jpg" alt="Judul Buku 1">
                <p>Judul Buku 1</p>
            </div>
            <div class="book">
                <img src="book2.jpg" alt="Judul Buku 2">
                <p>Judul Buku 2</p>
            </div>
            <div class="book">
                <img src="book3.jpg" alt="Judul Buku 3">
                <p>Judul Buku 3</p>
            </div>
        </div>
    </section>
    <footer>
        <p>&copy; 2024 Perpustakaan Digital. All rights reserved.</p>
    </footer>
    <script>
        function searchBooks() {
            let input = document.getElementById('search-input').value.toLowerCase();
            let books = document.getElementsByClassName('book');

            for (let i = 0; i < books.length; i++) {
                let bookTitle = books[i].getElementsByTagName('p')[0].innerText.toLowerCase();
                if (bookTitle.includes(input)) {
                    books[i].style.display = '';
                } else {
                    books[i].style.display = 'none';
                }
            }
        }

    </script>
</body>
</html>

<!-- Start Code HTML Index -->

#Note :
Perubahan kode HTML pada index.html berada pada :
        <!-- Form Pencarian -->
        <div id="search-bar">
            <input type="text" id="search-input" placeholder="Cari judul buku...">
            <button onclick="searchBooks()">Cari</button>
        </div>
Anda bisa memperhatikan code HTML pada file index.html sebelumnya. Dan penambahan fungsi Javascript untuk pencarian bukunya sebagai berikut :

<script>
        function searchBooks() {
            let input = document.getElementById('search-input').value.toLowerCase();
            let books = document.getElementsByClassName('book');

            for (let i = 0; i < books.length; i++) {
                let bookTitle = books[i].getElementsByTagName('p')[0].innerText.toLowerCase();
                if (bookTitle.includes(input)) {
                    books[i].style.display = '';
                } else {
                    books[i].style.display = 'none';
                }
            }
        }

    </script>


Jika Anda memerlukan bantuan lebih lanjut atau memiliki pertanyaan tentang membuat Web Perpustakaan Digital, jangan ragu untuk menghubungi ZE COME Training Center. Kami siap membantu Anda!

Lanjutkan ke Part berikutnya ya...


Membuat Website Perpustakaan Digital UKK RPL #Part1
Menambahkan Fitur Pencarian Koleksi - Web Perpustakaan #Part 2
Membuat Halaman HTML untuk Menu Lain - Web Perpustakaan #Part 3
Menambahkan Efek Hover Menu - Web Perpustakaan #Part 4

Post a Comment