Cara membuat halaman pencarian gambar pixabay di blog menggunakan javascript
Sesuai Janji Dipostingan sebelum nya, saya akan memberikan tutorial cara membuat form pencarian gambar pixabay. Anda bisa melihat nya disini
Dan sekarang Anda dapat membuat sebuah form pencarian sederhana dengan JavaScript untuk mengganti query pencarian di API Pixabay.
Berikut adalah contoh kode HTML dan JavaScript untuk form pencarian:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Pixabay Image Search</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form id="search-form">
<label for="query">Masukkan kata kunci pencarian:</label>
<input type="text" id="query" name="query" placeholder="Contoh: flowers">
<input type="submit" value="Cari">
</form>
<div id="pixabay-gallery"></div>
</body>
</html>JAVASCRIPT:
<script>
$(function() {
var apiKey = "YOUR_API_KEY"; // Gantilah dengan API key Anda
var baseUrl = "https://pixabay.com/api/?key=" + apiKey;
$("#search-form").submit(function(e) {
e.preventDefault();
var query = $("#query").val();
// Hapus gambar-gambar yang ada sebelumnya
$("#pixabay-gallery").empty();
var pixabayAPI = baseUrl + "&q=" + query + "&image_type=photo";
$.getJSON(pixabayAPI, function(data) {
if (data.hits.length > 0) {
$.each(data.hits, function(i, hit) {
var imageThumb = $("<img>");
imageThumb.attr("src", hit.previewURL);
imageThumb.attr("alt", hit.tags);
$("#pixabay-gallery").append(imageThumb);
});
}
});
});
});
</script>Dengan form ini, pengguna dapat memasukkan kata kunci pencarian dan hasil pencarian akan ditampilkan di bawahnya setelah form dikirim.
Untuk menambahkan tombol download, tombol next, dan tombol kembali (return) ke galeri gambar Pixabay Anda, Anda dapat mengikuti langkah-langkah berikut:
1. Tambahkan Tombol Download:
Anda dapat menambahkan tombol download di bawah setiap gambar yang ditampilkan. Anda bisa menggunakan tag `
<a>` untuk membuat tautan download. Di bawah ini adalah contoh kode untuk menambahkan tombol download: JAVASCRIPT:
Untuk menambahkan tombol "Next" (berikutnya), Anda perlu memiliki cara untuk mengelola halaman hasil pencarian. Misalnya, Anda bisa menggunakan variabel untuk melacak halaman saat ini dan menggantinya saat tombol "Next" ditekan. Berikut adalah contoh sederhana:
JAVASCRIPT :
var currentPage = 1; // Halaman awal
$("#next-button").click(function() {
currentPage++;
performSearch();
});
function performSearch() {
var pixabayAPI = baseUrl + "&q=" + query + "&image_type=photo&page=" + currentPage;
// Sisanya sama seperti sebelumnya, panggil $.getJSON dengan URL yang diperbarui.
}3. Tambahkan Tombol Return:
Anda dapat menambahkan tombol "Return" (kembali) untuk mengembalikan ke halaman sebelumnya. Ini bisa dilakukan dengan menambahkan tombol "Back" pada browser atau dengan JavaScript. Berikut adalah contoh tombol "Back" dengan JavaScript:
JAVASCRIPT:
$("#back-button").click(function() {
if (currentPage > 1) {
currentPage--;
performSearch();
}
});Pastikan untuk menyesuaikan kode ini sesuai dengan kebutuhan dan tampilan yang Anda inginkan di halaman web Anda.
Jika Kamu pusing Dan bingung, berikut adalah kode HTML yang telah diperbarui dengan tombol "Download", "Next", dan "Back":
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Pixabay Image Search</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form id="search-form">
<label for="query">Masukkan kata kunci pencarian:</label>
<input type="text" id="query" name="query" placeholder="Contoh: flowers">
<input type="submit" value="Cari">
</form>
<div id="pixabay-gallery"></div>
<button id="back-button">Kembali</button>
<button id="next-button">Selanjutnya</button>
</body>
</html>
JAVASCRIPT:
<script>
$(function() {
var apiKey = "YOUR_API_KEY"; // Gantilah dengan API key Anda
var baseUrl = "https://pixabay.com/api/?key=" + apiKey;
var currentPage = 1; // Halaman awal
var query = "";
$("#search-form").submit(function(e) {
e.preventDefault();
query = $("#query").val();
currentPage = 1; // Reset halaman saat pencarian baru
performSearch();
});
$("#back-button").click(function() {
if (currentPage > 1) {
currentPage--;
performSearch();
}
});
$("#next-button").click(function() {
currentPage++;
performSearch();
});
function performSearch() {
// Hapus gambar-gambar yang ada sebelumnya
$("#pixabay-gallery").empty();
var pixabayAPI = baseUrl + "&q=" + query + "&image_type=photo&page=" + currentPage;
$.getJSON(pixabayAPI, function(data) {
if (data.hits.length > 0) {
$.each(data.hits, function(i, hit) {
var imageThumb = $("<img>");
imageThumb.attr("src", hit.previewURL);
imageThumb.attr("alt", hit.tags);
var downloadLink = $("<a>");
downloadLink.attr("href", hit.largeImageURL); // Menggunakan URL gambar asli untuk mengunduh
downloadLink.attr("download", "image.jpg"); // Nama file yang akan diunduh
downloadLink.text("Download");
var imageContainer = $("<div>");
imageContainer.append(imageThumb, downloadLink);
$("#pixabay-gallery").append(imageContainer);
});
}
});
}
});
</script>Tombol "Download" akan muncul di bawah setiap gambar, tombol "Next" akan memungkinkan Anda untuk melihat halaman berikutnya hasil pencarian, dan tombol "Back" akan mengembalikan ke halaman sebelumnya. Pastikan untuk menggantikan `"YOUR_API_KEY"` dengan kunci API Pixabay Anda sendiri.
Demo⬇️:
User: kenapa gak langsung aja si min ngsih nya, kenapa mesti dipisah pisah segala🤦🏽
Admin: Maaf biar agak panjang isi Artikel nya 😂😂😂😁
Posting Komentar untuk "Cara membuat halaman pencarian gambar pixabay di blog menggunakan javascript "
Silahkan berkomentar sesuai ketentuan layanan dan kebijakan privasi blog kami