Berikut adalah contoh kode untuk membuat aplikasi Breadcrumb Structured Data Generator dengan menggunakan JavaScript. Aplikasi ini akan menghasilkan kode output yang bisa langsung disalin oleh pengguna. Kami juga akan menggunakan user interface yang dibangun dengan menggunakan Bootstrap untuk tampilan yang lebih menarik.
Breadcrumb Structured Data Generator
JavaScript
// Mendapatkan elemen input dari pengguna
const breadcrumbInput = document.getElementById('breadcrumb-input');
// Mendapatkan elemen output
const breadcrumbOutput = document.getElementById('breadcrumb-output');
// Fungsi untuk menghasilkan kode structured data
function generateStructuredData() {
const breadcrumbValue = breadcrumbInput.value;
// Membuat objek structured data
const structuredData = {
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": []
};
// Memisahkan nilai input menjadi array
const breadcrumbItems = breadcrumbValue.split(',');
// Menambahkan setiap elemen breadcrumb ke structured data
breadcrumbItems.forEach((item, index) => {
structuredData.itemListElement.push({
"@type": "ListItem",
"position": index + 1,
"name": item.trim(),
"item": window.location.href
});
});
// Mengubah structured data menjadi JSON
const structuredDataJson = JSON.stringify(structuredData, null, 2);
// Menampilkan kode output
breadcrumbOutput.textContent = structuredDataJson;
}
// Event listener untuk tombol generate
document.getElementById('generate-button').addEventListener('click', generateStructuredData);HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Breadcrumb Structured Data Generator</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<h1>Breadcrumb Structured Data Generator</h1>
<div class="form-group">
<label for="breadcrumb-input">Breadcrumb:</label>
<input type="text" class="form-control" id="breadcrumb-input" placeholder="Enter breadcrumb items">
</div>
<button type="button" class="btn btn-primary" id="generate-button">Generate</button>
<div class="mt-3">
<label for="breadcrumb-output">Structured Data Output:</label>
<textarea class="form-control" id="breadcrumb-output" rows="5" readonly></textarea>
</div>
</div>
<script src="script.js"></script>
</body>
</html>Dengan menggunakan kode di atas, Anda dapat membuat aplikasi Breadcrumb Structured Data Generator yang menghasilkan kode output yang bisa langsung disalin oleh pengguna. Aplikasi ini juga dilengkapi dengan user interface yang dibangun menggunakan Bootstrap untuk tampilan yang lebih menarik.
Pastikan Anda menyertakan file JavaScript dan CSS yang diperlukan, serta menghubungkannya dengan file HTML Anda. Anda juga dapat menyesuaikan tampilan aplikasi dengan menambahkan gaya kustom di dalam file CSS.
Baca juga:
Semoga contoh kode di atas bermanfaat bagi Anda dalam membuat aplikasi Breadcrumb Structured Data Generator menggunakan JavaScript.
Leave a Reply