💻 Full Working Code
📁 index.html
<!DOCTYPE html>
<html lang="sw">
<head>
<meta charset="UTF-8">
<title>JSON Data kwa API Integration - Faulink</title>
<style>
body { font-family: Arial; background: #eef2f3; text-align: center; padding: 40px; }
pre { background: #fff; padding: 20px; border-radius: 10px; display: inline-block; text-align: left; }
button { background: #28a745; color: white; border: none; padding: 10px 20px; cursor: pointer; }
</style>
</head>
<body>
<h2>🔗 JSON Data kwa API Integration</h2>
<button id="btn">Pata JSON Data</button>
<pre id="output">Hakuna data bado...</pre>
<script>
document.getElementById("btn").onclick = function() {
fetch("api.php")
.then(res => res.json())
.then(data => {
document.getElementById("output").textContent = JSON.stringify(data, null, 2);
});
};
</script>
</body>
</html>
📁 api.php
<?php
header('Content-Type: application/json');
$data = [
"jina" => "Faustine Mwoya",
"channel" => "Faulink",
"ujumbe" => "Karibu ujifunze JSON Data kwa PHP API Integration!"
];
echo json_encode($data);
?>
________________________________________
🎥 YouTube Description
JSON ni njia bora ya kutuma na kupokea data kati ya PHP backend na frontend ya JavaScript.
Somo hili linaonyesha jinsi ya kuunda API ndogo inayorudisha JSON, na jinsi ya kutumia fetch() kuisoma.
Ujuzi huu ni msingi wa kutengeneza APIs, mobile apps, na AJAX dashboards.
🔔 Subscribe kwa zaidi ya masomo ya web development kutoka Faulink.
________________________________________
🏷️ Hashtags
#JSON #API #PHP #AJAX #WebDevelopment #Faulink #Coding #LearnProgramming #FetchAPI #WebDesign