Cara Membuat Search Engine dengan JavaScript

Posted on

Cara Membuat Search Engine dengan JavaScript – Sobat Java, apakah kamu pernah memikirkan bagaimana mesin pencari seperti Google atau Bing bekerja di balik layar? Bagaimana mereka bisa menemukan informasi yang kita cari begitu cepat?

Nah, mesin pencari dengan JavaScript adalah salah satu cara untuk menciptakan pengalaman pencarian yang serupa di situs web atau aplikasi webmu sendiri. Di dunia di mana informasi menjadi semakin penting, memiliki mesin pencari sendiri dapat menjadi aset berharga.

Dalam artikel ini, kelasjava akan memberikan kamu panduan langkah-langkah untuk membuat search engine sederhana dengan JavaScript. Bagi kalian yang mendapatkan tugas atau studi kasus untuk membuat mesin pencarian di JavaScript, bisa simak tutorialnya dibawah ini.

Alat yang Dibutuhkan untuk Membuat Search Engine dengan JavaScript

Sebelum kamu memulai untuk membuat mesin pencarian menggunakan JS, pastikan telah menyiapkan alat-alat berikut ini:

  • Perangkat laptop.
  • Sublime Text (Editor kode teks).
  • Google Chrome (Peramban web).
  • Niat yang kuat untuk belajar dan berkarya.

Cara Membuat Search Engine Sederhana dengan JavaScript

1. Siapkan Folder dan File

  • Buat Folder: Buat folder untuk proyek search engine.
  • Buat File HTML: Buat file index.html untuk struktur halaman web.
  • Buat File CSS: Buat file style.css untuk mendesain tampilan halaman web.
  • Buat File JavaScript: Buat file script.js untuk menulis kode JavaScript untuk fungsionalitas dari search engine.
Baca Juga:   Cara Membuat Jam Analog dengan JavaScript

2. Buat Kode HTML (index.html)

Tambahkan struktur HTML untuk membuat search engine, untuk kode HTML dari web search engine tersebut bisa salin kode dibawah ini.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>https://kelasjava.com/</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h2>Search Engine JS - By: KelasJava </h2>
        <input type="text" id="searchInput" placeholder="Masukkan kata kunci pencarian">
        <button id="searchBtn">Cari</button>
        <div id="searchResults"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

3. Buat Kode CSS (style.css)

Buatlah kode CSS untuk menambahkan tampilan yang menarik pada website search engine, untuk kode CSS dari search engine tersebut bisa salin kode dibawah ini.

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    width: 50%;
    margin: 50px auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h2 {
    text-align: center;
}

input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

button {
    background-color: #4caf50;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

#searchResults {
    margin-top: 20px;
}

.result {
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

4. Buat Kode JavaScript (script.js)

Tulis kode JavaScript untuk menambahkan logika pencarian. Anda dapat menggunakan data palsu atau mengambil data dari sumber eksternal seperti API, untuk kode JS-nya kamu bisa menyalin dibawah ini

const searchBtn = document.getElementById('searchBtn');
const searchInput = document.getElementById('searchInput');
const searchResults = document.getElementById('searchResults');

// Data palsu sebagai contoh
const data = [
    'KelasJava Lorem ipsum dolor sit amet',
    'KelasJava consectetur adipiscing elit',
    'KelasJava sed do eiusmod tempor incididunt',
    'KelasJava ut labore et dolore magna aliqua',
    'KelasJava Ut enim ad minim veniam',
    'KelasJava quis nostrud exercitation ullamco laboris nisi',
    'KelasJava aliquip ex ea commodo consequat'
];

searchBtn.addEventListener('click', () => {
    const query = searchInput.value.toLowerCase();
    const results = data.filter(item => item.toLowerCase().includes(query));
    displayResults(results);
});

function displayResults(results) {
    searchResults.innerHTML = '';
    results.forEach(result => {
        const resultElement = document.createElement('div');
        resultElement.classList.add('result');
        resultElement.textContent = result;
        searchResults.appendChild(resultElement);
    });
}

5. Jalankan Kode

Jika semua kode dari proyek search engine sudah dituliskan, maka jalankan kode dengan membuka file index.html pada folder yang kamu simpan tadi atau bisa juga dengan melakukan klik kanan pada kode index.html lalu Open in Browser.

Baca Juga:   Cara Membuat Program Cek Jumlah Kata dengan JavaScript

6. Tampilkan Hasil

Kamu telah berhasil membuat Search Engine dengan JavaScript dan membuat tampilan search engine menjadi responsif menggunakan CSS, bisa dilihat untuk tampilan data ketika dicari berdasarkan inputan search engine.

Penutup

Dengan mengikuti langkah-langkah di atas, kamu telah berhasil menyelesaikan proyek dalam membuat search engine dengan JavaScript. Kamu bisa menambahkan data pencarian menggunakan API atau menambahkan secara manual sesuai dengan kebutuhanmu. Selamat mencoba!