Menampilkan File Owl Di Website
menampilkan file owl di website
membuat contoh frontend-nya, yaitu web sederhana yang:
Menyambung ke Fuseki SPARQL endpoint (menggunakan data dari
library.owl).Mengambil dan menampilkan data buku dan penulisnya.
Menggunakan HTML + JavaScript (Fetch API), jadi bisa langsung dibuka di browser.
Contoh Frontend: index.html
Kode Web (HTML + JS)
Simpan file ini sebagai index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Library Ontology Viewer</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 2rem;
background: #f4f4f4;
}
h1 {
color: #333;
}
table {
border-collapse: collapse;
width: 100%;
margin-top: 1rem;
}
th, td {
padding: 10px;
border: 1px solid #ccc;
background: #fff;
}
th {
background-color: #eee;
}
</style>
</head>
<body>
<h1>???? Daftar Buku dan Penulis (Dari Ontologi)</h1>
<table id="books-table">
<thead>
<tr>
<th>Judul Buku</th>
<th>Nama Penulis</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
async function getBooks() {
const query = `
PREFIX lib: <http://www.semanticweb.org/ontologies/library#>
SELECT ?title ?author WHERE {
?book a lib:Book .
?book lib:title ?title .
?book lib:hasAuthor ?auth .
?auth lib:name ?author .
}
`;
const response = await fetch("http://localhost:3030/library/query", {
method: "POST",
headers: {
"Content-Type": "application/sparql-query",
"Accept": "application/sparql-results+json"
},
body: query
});
const result = await response.json();
const tbody = document.querySelector("#books-table tbody");
tbody.innerHTML = ""; // Clear previous content
result.results.bindings.forEach(item => {
const row = document.createElement("tr");
const titleCell = document.createElement("td");
const authorCell = document.createElement("td");
titleCell.textContent = item.title.value;
authorCell.textContent = item.author.value;
row.appendChild(titleCell);
row.appendChild(authorCell);
tbody.appendChild(row);
});
}
getBooks();
</script>
</body>
</html>
Cara Menjalankan
Jalankan Fuseki dan Upload Ontologi:
Upload
library.owlke dataset bernamalibrary.Akses SPARQL endpoint di
http://localhost:3030/library/query.
Buka
index.htmldi Browser.Akan muncul tabel dengan data judul buku dan penulis berdasarkan ontologi.
About Admin
That is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has ab more normal distribution of letters, as opposed to using content here.
Long established fact that a reader will be distracted
Long established fact that a reader will be distracted
Long established fact that a reader will be distracted
0 Comments