Aplikasi Person Structured Data Generator dengan JavaScript

Aplikasi Person Structured Data Generator dengan JavaScript

—

by

Webbiz.ID
in ,

Berikut adalah contoh Aplikasi Person Structured Data Generator dengan JavaScript. Aplikasi ini akan menghasilkan kode output yang bisa langsung disalin oleh pengguna. User interface aplikasi ini akan menggunakan Bootstrap.

Person Structured Data Generator

Person Structured Data Generator

Structured Data Output

  

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <title>Person Structured Data Generator</title>
</head>
<body>
  <div class="container">
    <h1>Person Structured Data Generator</h1>
    <form>
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" placeholder="Enter name">
      </div>
      <div class="form-group">
        <label for="jobTitle">Job Title</label>
        <input type="text" class="form-control" id="jobTitle" placeholder="Enter job title">
      </div>
      <div class="form-group">
        <label for="email">Email</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email">
      </div>
      <div class="form-group">
        <label for="telephone">Telephone</label>
        <input type="tel" class="form-control" id="telephone" placeholder="Enter telephone">
      </div>
      <div class="form-group">
        <label for="address">Address</label>
        <input type="text" class="form-control" id="address" placeholder="Enter address">
      </div>
      <button type="button" class="btn btn-primary" onclick="generateStructuredData()">Generate</button>
    </form>
    <div class="mt-4">
      <h3>Structured Data Output</h3>
      <pre id="output"></pre>
    </div>
  </div>

  <script>
    function generateStructuredData() {
      var name = document.getElementById("name").value;
      var jobTitle = document.getElementById("jobTitle").value;
      var email = document.getElementById("email").value;
      var telephone = document.getElementById("telephone").value;
      var address = document.getElementById("address").value;

      var person = {
        name: name,
        jobTitle: jobTitle,
        email: email,
        telephone: telephone,
        address: address,
      };

      var output = JSON.stringify({
        "@context": "https://schema.org",
        "@type": "Person",
        name: person.name,
        jobTitle: person.jobTitle,
        email: person.email,
        telephone: person.telephone,
        address: {
          "@type": "PostalAddress",
          streetAddress: person.address,
          addressLocality: "City",
          addressRegion: "State",
          postalCode: "12345",
          addressCountry: "Country",
        },
      }, null, 2);

      document.getElementById("output").textContent = output;
    }
  </script>
</body>
</html>
HTML
Dengan menggunakan kode di atas, Anda dapat membuat aplikasi Person Structured Data Generator yang menghasilkan kode output dalam format JSON-LD dan menampilkan output tersebut di halaman HTML menggunakan user interface yang dibuat dengan Bootstrap.
Artikel Terbaru ⭐