💻 Full Working Code
📁 index.html
<!DOCTYPE html>
<html lang="sw">
<head>
<meta charset="UTF-8">
<title>CRUD kwa AJAX - Faulink</title>
<style>
body { font-family: Arial; text-align: center; padding: 30px; background: #eef2f3; }
input { padding: 8px; width: 200px; margin: 5px; }
button { padding: 8px 15px; background: #007bff; color: white; border: none; cursor: pointer; border-radius: 5px; }
#result { margin-top: 20px; background: #fff; padding: 15px; border-radius: 10px; display: inline-block; }
</style>
</head>
<body>

<h2>🧩 CRUD Operations kwa AJAX</h2>
<input type="text" id="name" placeholder="Weka jina...">
<button onclick="addData()">Ongeza</button>
<div id="result"></div>

<script>
function addData(){
let name = document.getElementById("name").value;
if(name == "") return alert("Weka jina!");

let xhr = new XMLHttpRequest();
xhr.open("POST", "crud.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onload = function(){
if(this.status == 200){
document.getElementById("result").innerHTML = this.responseText;
document.getElementById("name").value = "";
}
}
xhr.send("name=" + name);
}
</script>

</body>
</html>
📁 crud.php
<?php
$name = $_POST['name'] ?? '';
if($name != ''){
echo "✅ Jina '$name' limehifadhiwa kwa mafanikio!";
} else {
echo "❌ Hakuna jina lililotumwa!";
}
?>
________________________________________
🎥 YouTube Description
CRUD (Create, Read, Update, Delete) ndiyo moyo wa mifumo yote ya data.
Katika somo hili, tumeonyesha jinsi ya kutekeleza “Create” operation kwa kutumia AJAX na PHP.
Unaweza kupanua mfano huu kwa “Edit” na “Delete” functionalities.
💡 Hii ni hatua ya kwanza kuelekea kujenga mifumo kamili ya Database kwa AJAX.
👨💻 Tazama video kamili kwenye Faulink YouTube Channel.
________________________________________
🏷️ Hashtags
#CRUD #AJAX #PHP #JavaScript #Faulink #Coding #Database #WebDevelopment #LearnCoding