Berikut adalah contoh Aplikasi Job Posting Structured Data Generator. Aplikasi ini akan menghasilkan kode output yang dapat langsung disalin oleh pengguna. User interface aplikasi ini menggunakan Bootstrap untuk tampilan yang lebih menarik dan responsif.
Job Posting Structured Data Generator
JavaScript
// Kode JavaScript untuk aplikasi Job Posting Structured Data Generator
// Fungsi untuk menghasilkan kode output
function generateStructuredData() {
// Kode untuk mengambil input dari pengguna dan menghasilkan kode output
var jobTitle = document.getElementById('jobTitle').value;
var jobDescription = document.getElementById('jobDescription').value;
var jobLocation = document.getElementById('jobLocation').value;
var structuredData = {
"@context": "https://schema.org",
"@type": "JobPosting",
"title": jobTitle,
"description": jobDescription,
"jobLocation": {
"@type": "Place",
"address": {
"@type": "PostalAddress",
"addressLocality": jobLocation
}
}
};
var outputCode = JSON.stringify(structuredData, null, 2);
// Menampilkan kode output ke pengguna
document.getElementById('outputCode').value = outputCode;
}
// Event listener untuk tombol generate
document.getElementById('generateButton').addEventListener('click', generateStructuredData);Berikut ini adalah contoh kode HTML untuk user interface aplikasi menggunakan Bootstrap.
HTML
<!-- Kode HTML untuk user interface aplikasi Job Posting Structured Data Generator -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Job Posting 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">
<h1>Job Posting Structured Data Generator</h1>
<div class="form-group">
<label for="jobTitle">Job Title:</label>
<input type="text" class="form-control" id="jobTitle">
</div>
<div class="form-group">
<label for="jobDescription">Job Description:</label>
<textarea class="form-control" id="jobDescription" rows="5"></textarea>
</div>
<div class="form-group">
<label for="jobLocation">Job Location:</label>
<input type="text" class="form-control" id="jobLocation">
</div>
<button id="generateButton" class="btn btn-primary">Generate</button>
<div class="form-group mt-4">
<label for="outputCode">Output Code:</label>
<textarea class="form-control" id="outputCode" rows="10" readonly></textarea>
</div>
</div>
<script src="script.js"></script>
</body>
</html>Dengan menggunakan kode di atas, Anda dapat membuat aplikasi Job Posting Structured Data Generator yang dapat menghasilkan kode output yang siap digunakan. Pengguna dapat mengisi informasi pekerjaan seperti judul pekerjaan, deskripsi pekerjaan, dan lokasi pekerjaan, kemudian mengklik tombol “Generate” untuk menghasilkan kode output yang sesuai dengan struktur data terstruktur yang diperlukan.
Pastikan Anda telah menyertakan file JavaScript dengan nama “script.js” yang berisi kode JavaScript di atas dalam direktori yang sama dengan file HTML.
Dengan menggunakan Bootstrap, tampilan aplikasi akan menjadi lebih menarik dan responsif, sehingga pengguna dapat dengan mudah mengisi informasi pekerjaan dan melihat kode output yang dihasilkan.
Selamat mencoba!
Leave a Reply