Widget HTML #1

Beranda / CSS / HTML / JavaScript

Tutorial Membuat Aplikasi Filter dan Pencarian Artikel dengan HTML, Bootstrap, dan jQuery

Posting Komentar

Halo, teman-teman! Pada tutorial kali ini, kita akan belajar bagaimana membuat aplikasi web sederhana untuk memfilter dan mencari artikel berdasarkan kategori dan judul menggunakan HTML, Bootstrap, dan jQuery. Aplikasi ini sangat cocok untuk kalian yang ingin mengimplementasikan fitur pencarian dan filter pada website yang menampilkan banyak konten atau artikel. Kita akan mengorganisir kode dengan memisahkan HTML, CSS, dan JavaScript ke dalam file terpisah. Yuk, langsung saja kita mulai!

Langkah 1: Persiapan,

Sebelum kita memulai, pastikan teman-teman sudah memiliki editor teks seperti Visual Studio Code dan browser untuk melihat hasilnya. Selain itu, kita akan menggunakan Bootstrap untuk styling dan jQuery untuk fungsi JavaScript-nya.

Langkah 2: Membuat File HTML

Buatlah file baru dengan nama index.html dan masukkan kode berikut: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search & Category Filter</title>
    <link href="style.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="container my-4">
    <div class="row mb-4">
        <div class="col-12">
            <input type="text" id="search" class="form-control" placeholder="Search by article title...">
        </div>
    </div>
    <div class="row mb-4">
        <div class="col-12">
            <button class="btn btn-primary filter-btn" data-filter="all">All</button>
            <button class="btn btn-secondary filter-btn" data-filter="technology">Technology</button>
            <button class="btn btn-secondary filter-btn" data-filter="javascript">JavaScript</button>
            <button class="btn btn-secondary filter-btn" data-filter="design">Design</button>
        </div>
    </div>
    <div class="row" id="post-grid">
        <!-- Contoh Kartu Artikel akan ditambahkan di sini -->
    </div>
</div>

<script src="script.js"></script>

</body>
</html>

Langkah 3: Membuat File CSS

Buat file baru dengan nama style.css. Karena kita menggunakan Bootstrap, file CSS ini bisa dibiarkan kosong atau bisa digunakan untuk menambahkan style khusus jika dibutuhkan. Misalnya: 

body {
    background-color: #f4f4f4;
}

Langkah 4: Menambahkan Artikel Card

Di dalam div dengan id post-grid di file index.html, tambahkan beberapa card artikel sebagai contoh. Gunakan Bootstrap untuk styling card. Berikut contoh untuk satu kartu: 

<div class="col-md-4 mb-4 post-card" data-category="technology">
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Understanding the Latest Technology Trends</h5>
            <p class="card-text">Category: Technology</p>
            <p class="card-text">This article explores the latest trends in technology.</p>
        </div>
    </div>
</div>

Langkah 5: Menambahkan JavaScript

Buat file baru dengan nama script.js dan tambahkan kode berikut: 

$(document).ready(function(){
    var selectedCategory = 'all';

    $('#search').on('keyup', function(){
        filterPosts();
    });

    $('.filter-btn').on('click', function(){
        selectedCategory = $(this).attr('data-filter');
        $('.filter-btn').removeClass('btn-primary').addClass('btn-secondary');
        $(this).removeClass('btn-secondary').addClass('btn-primary');
        filterPosts();
    });

    function filterPosts() {
        var searchValue = $('#search').val().toLowerCase();
        $('#post-grid .post-card').each(function(){
            var titleText = $(this).find('.card-title').text().toLowerCase();
            var category = $(this).attr('data-category');
            $(this).toggle((selectedCategory === 'all' || category === selectedCategory) && titleText.indexOf(searchValue) > -1);
        });
    }
});

Simpan semua file dan buka index.html dengan browser pilihan kalian. Sekarang, teman-teman bisa mencoba fitur pencarian dan filter. Ketikkan judul artikel di kotak pencarian atau klik salah satu kategori untuk memfilter artikel berdasarkan kategori.

Kesimpulan

Itulah cara membuat aplikasi filter dan pencarian artikel menggunakan HTML, Bootstrap, dan jQuery dengan struktur file yang rapi dan terorganisir. Aplikasi ini bisa diintegrasikan ke dalam proyek yang lebih besar atau dikembangkan lebih lanjut dengan fitur-fitur tambahan. Selamat mencoba, dan semoga berhasil! Jangan lupa untuk terus eksplorasi dan belajar. Selamat coding, teman-teman!

Posting Komentar untuk "Tutorial Membuat Aplikasi Filter dan Pencarian Artikel dengan HTML, Bootstrap, dan jQuery"

Posting Komentar