Cara Membuat Search Engine dengan JavaScript
Cara Membuat Search Engine dengan JavaScript - Pada kesempatan ini, saya akan memberikan tutorial tentang cara membuat kotak pencarian yang menggabungkan mesin pencari Google, Bing, dan Yahoo dalam satu halaman, sehingga saat memasukkan kata kunci di kotak pencarian, pengguna dapat memilih mesin pencarian yang diinginkan.
Sebelum membuat, berikut alat yang harus disiapkan.
- Komputer/Laptop/Android. jika tidak punya silahkan pinjam teman anda.
- Aplikasi Text Editor. anda bisa menggunakan notepad, notepad++, VSC, sublime text, dan sebagainya..
- Browser. Digunakan untuk membuka halaman web yang akan dibuat nantinya.
- Niat yang Tulus. tanpa niat usahamu akan sia-sia.
Cara Membuat Mesin Pencari dengan JavaScript
Berikut ini panduan membuat kotak search engine menggunakan JavaScript, sebagai berikut :
1. Buat file index.html
Pertama buka aplikasi text editor dan buat file baru dengan nama index.html, setelah itu copy dan paste code berikut.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Search Engine | Ansori Web</title><style></style></head><body><div class="container"><h1>Search Engine</h1><form id="searchForm" onsubmit="return submitForm()"><input type="text" id="searchTerm" name="q" placeholder="Search..." required><select id="searchEngine" name="searchEngine"><option value="https://www.google.com/search" target="_blank">Google</option><option value="https://www.bing.com/search">Bing</option><option value="https://search.yahoo.com/search" target="_blank">Yahoo</option></select><input type="submit" value="Search"></form></div><script></script></body></html>
2. Tambahkan Kode CSS
Setelah itu tambahkan kode css agar tampilan menarik diantara tag <style> </style>, dan copy paste kode berikut ini.
body {font-family: Arial, sans-serif;text-align: center;background-color: #f3f3f3;color: #333;transition: background-color 0.5s ease;}.container {margin-top: 50px;display: grid;grid-template-rows: auto; /* Hanya satu baris */gap: 20px;}input[type="text"], select {width: 300px;padding: 10px;font-size: 16px;}input[type="submit"] {padding: 10px 20px;font-size: 16px;background-color: #4CAF50;color: white;border: none;cursor: pointer;}
3. Tambahkan Kode JavaScript
Kemudian tambahkan kode JavaScript berikut diantara <script> </script> agar search engine berjalan dengan baik, untuk code bisa copy dan paste berikut.
function submitForm() {var searchTerm = document.getElementById("searchTerm").value;var searchEngine = document.getElementById("searchEngine").value;var searchUrl = searchEngine + "?q=" + searchTerm;window.open(searchUrl, '_blank');return false; // prevent form submission}
4. Jalankan Program
Apabila sudah selesai, jalankan program dengan cara membuka file index.html dan lihat hasilnya, anda bisa mengembangkan lagi dengan kreativitas masing-masing. Untuk preview script search engine sebagai berikut :
Kesimpulan
Demikian artikel yang membahas tentang Cara Membuat Search Engine dengan JavaScript, semoga tutorial ini bermanfaat bagi kita semua yang sedang mencari referensi yang diberikan oleh guru anda. Jika ada pertanyaan atau kurang jelas, script error, atau segala pertanyaan tentang artikel ini bisa ditanyakan melalui kolom komentar dibawah ini. Terima Kasih.