Backend Dan Frontend Dari Implementasi Ontologi
backend dan frontend dari implementasi ontologi
Di bawah ini aku kasih versi backend dan frontend dari implementasi ontologi yang sama (library.owl) menggunakan tiga pendekatan:
1. React JS (Frontend) – Konsumsi SPARQL Endpoint
Tujuan: Fetch data dari Fuseki (
localhost:3030/library/query) dan tampilkan daftar buku.
File: App.js
import React, { useEffect, useState } from 'react';
function App() {
const [books, setBooks] = useState([]);
useEffect(() => {
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 .
}
`;
fetch("http://localhost:3030/library/query", {
method: "POST",
headers: {
"Content-Type": "application/sparql-query",
"Accept": "application/sparql-results+json"
},
body: query
})
.then(res => res.json())
.then(data => {
const results = data.results.bindings.map(b => ({
title: b.title.value,
author: b.author.value
}));
setBooks(results);
});
}, []);
return (
<div style={{ padding: 20 }}>
<h1>???? Buku dan Penulis (React)</h1>
<table border="1" cellPadding="10">
<thead>
<tr>
<th>Judul</th>
<th>Penulis</th>
</tr>
</thead>
<tbody>
{books.map((b, i) => (
<tr key={i}>
<td>{b.title}</td>
<td>{b.author}</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
export default App;2. PHP Backend (with CURL)
Tujuan: Query data dari ontologi dan tampilkan dalam halaman PHP.
File: index.php
<?php
$endpoint = "http://localhost:3030/library/query";
$query = <<<SPARQL
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 .
}
SPARQL;
$ch = curl_init($endpoint);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
"Content-Type: application/sparql-query",
"Accept: application/sparql-results+json"
]);
curl_setopt($ch, CURLOPT_POSTFIELDS, $query);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($ch);
curl_close($ch);
$data = json_decode($response, true);
?>
<!DOCTYPE html>
<html>
<head><title>Perpustakaan</title></head>
<body>
<h1>???? Data Buku dan Penulis (PHP)</h1>
<table border="1" cellpadding="10">
<tr><th>Judul</th><th>Penulis</th></tr>
<?php foreach ($data['results']['bindings'] as $row): ?>
<tr>
<td><?= $row['title']['value'] ?></td>
<td><?= $row['author']['value'] ?></td>
</tr>
<?php endforeach; ?>
</table>
</body>
</html>3. Python (Flask API)
Tujuan: Buat API REST yang ambil data dari Fuseki, lalu frontend (apa saja) bisa konsumsi.
File: app.py
from flask import Flask, jsonify
import requests
app = Flask(__name__)
@app.route("/api/books")
def get_books():
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 .
}
"""
headers = {
"Content-Type": "application/sparql-query",
"Accept": "application/sparql-results+json"
}
response = requests.post("http://localhost:3030/library/query", data=query, headers=headers)
results = response.json()['results']['bindings']
books = [{"title": r['title']['value'], "author": r['author']['value']} for r in results]
return jsonify(books)
if __name__ == "__main__":
app.run(debug=True)Next Steps
Kamu bisa gabungkan frontend React ke backend Flask atau PHP jika mau all-in-one app.
Untuk produksi, jangan lupa tambahkan CORS, validasi, dan pengamanan data.
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