CRUD Operation with AJAX CodeIgniter 3 in PHP
<?php
defined("BASEPATH") or exit("No direct script access allowed");
class AjaxCrud extends CI_Controller
{
public function __construct()
{
parent::__construct();
$this->load->model("AjaxModel");
}
public function index()
{
return $this->load->view("Ajax/create");
}
public function getRecord()
{
$result = $this->AjaxModel->getAllData();
echo json_encode($result);
}
public function dataInsert()
{
$data = array(
"name" => $this->input->post("name"),
"email" => $this->input->post("email")
);
$result = $this->AjaxModel->InsertData($data);
echo $result;
}
public function deleteData()
{
echo $Id = $this->input->post("id");
$result = $this->db->delete("users", array("id" => $Id));
return $result;
}
public function getRecordById()
{
$Id = $this->input->post("id");
$result = $this->AjaxModel->getRecordById($Id);
echo json_encode($result);
}
public function updateData()
{
$uid = $this->input->post("id");
$data = array(
"name" => $this->input->post("name"),
"email" => $this->input->post("email")
);
echo $result = $this->AjaxModel->updateData($data, $uid);
}
}
Above File is controllers/AjaxCrud.php Controller File.Below File is models/AjaxModel.php Model File.
<?php
defined("BASEPATH") or exit("No direct script access allowed");
class AjaxModel extends CI_Model
{
public function getAllData()
{
$query = $this->db->get("users");
return $query->result();
}
public function InsertData($data)
{
return $this->db->insert("users", $data);
}
public function getRecordById($id)
{
$query = $this->db->get_where("users", array("id" => $id));
return $query->result();
}
public function updateData($data, $uid)
{
$this->db->where("id", $uid);
return $this->db->update("users", $data);
}
}
Below File is views/Ajax/create.php View File.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CRUD</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<h1 class="text-center text-primary mt-3">Crud Operation in CI using Ajax</h1>
<!-- Button trigger modal -->
<button type="button" id="AddNewUser" class="btn btn-primary">
Add New User
</button>
<div id="result" class="mt-2"></div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Add User</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label>Name</label>
<input type="text" id="name" class="form-control">
</div>
<div class="form-group">
<label>Email</label>
<input type="text" id="email" class="form-control">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary saveuser" id="btnClosePopup">Add User</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalEdit" tabindex="-1" aria-labelledby="exampleModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Edit User</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label>Name</label>
<input type="text" id="nameE" class="form-control" value="">
</div>
<div class="form-group">
<label>Email</label>
<input type="text" id="emailE" class="form-control" value="">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary update" value="" id="btnClosePopup">Update</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModalView" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">View User</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div id="view_res"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<!--<button type="button" class="btn btn-primary">Save changes</button>-->
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
getAllRecords();
function getAllRecords() {
var html = "";
$.ajax({
type: "GET",
url: "http://localhost/CRUD_CodeIgniter/AjaxCrud/getRecord",
dataType: "JSON",
success: function(data) {
// var resultData = JSON.parse(data);
var resultData = data;
html += '<table class="table table-bordered">';
html += ' <tr>';
html += ' <th>Id</th>';
html += ' <th>Name</th>';
html += ' <th>Email</th>';
html += ' <th>Created At</th>';
html += ' <th>Action</th>';
html += ' </tr>';
for (var i = 0; i < resultData.length; i++) {
html += ' <tr>';
html += ' <td>' + resultData[i].id + '</td>';
html += ' <td>' + resultData[i].name + '</td>';
html += ' <td>' + resultData[i].email + '</td>';
html += ' <td>' + resultData[i].created_at + '</td>';
html += ' <td><button class="btn btn-primary view" value=' + resultData[i].id + '>View</button> <button class="btn btn-secondary edit" value=' + resultData[i].id + '>Edit</button> <button class="btn btn-danger delete" value=' + resultData[i].id + '>Delete</button></td>';
html += ' </tr>';
}
html += '</table>';
$("#result").html(html);
},
error: function(textStatus, errorThrown) {
console.log("AJAX Request Failed:");
console.log("Status:", textStatus);
console.log("Error:", errorThrown);
}
});
}
$(document).on("click", "#AddNewUser", function() {
$("#exampleModal").modal("show");
});
$(document).on("click", ".saveuser", function() {
var nameOfUser = $("#name").val();
var emailOfUser = $("#email").val();
var data = {
name: nameOfUser,
email: emailOfUser
};
$.ajax({
type: "POST",
url: "http://localhost/CRUD_CodeIgniter/AjaxCrud/dataInsert",
data: data,
dataType: "text",
success: function(resultData) {
$("#name").val("");
$("#email").val("");
if (resultData) {
getAllRecords();
$("#exampleModal").modal("hide");
}
},
error: function(textStatus, errorThrown) {
console.log("AJAX Request Failed:");
console.log("Status:", textStatus);
console.log("Error:", errorThrown);
}
});
});
$(document).on("click", ".delete", function() {
var deleteId = $(this).val();
var dataDelete = {
id: deleteId
};
$.ajax({
type: "POST",
url: "http://localhost/CRUD_CodeIgniter/AjaxCrud/deleteData",
data: dataDelete,
dataType: "text",
success: function(resultData) {
console.log(resultData);
if (resultData) {
getAllRecords();
}
},
error: function(textStatus, errorThrown) {
console.log("AJAX Request Failed:");
console.log("Status:", textStatus);
console.log("Error:", errorThrown);
}
});
});
$(document).on("click", ".view", function() {
$("#exampleModalView").modal("show");
var vid = $(this).val();
var dataDelete = {
id: vid
};
$.ajax({
type: "POST",
url: "http://localhost/CRUD_CodeIgniter/AjaxCrud/getRecordById",
data: dataDelete,
dataType: "text",
success: function(data) {
var resultD = JSON.parse(data);
console.log(resultD);
html = "";
html += "<table class='table table-striped'>";
html += "<tr>";
html += "<th>Name</th>";
html += "<td>" + resultD[0].name + "</td>";
html += "</tr>";
html += "<tr>";
html += "<th>Email</th>";
html += "<th>" + resultD[0].email + "</th>";
html += "</tr>";
html += "</table>";
$("#view_res").html(html);
},
error: function(textStatus, errorThrown) {
console.log("AJAX Request Failed:");
console.log("Status:", textStatus);
console.log("Error:", errorThrown);
}
});
});
$(document).on("click", ".edit", function() {
$("#exampleModalEdit").modal("show");
var eid = $(this).val();
$(".update").val(eid);
var dataread = {
id: eid
};
$.ajax({
type: "POST",
url: "http://localhost/CRUD_CodeIgniter/AjaxCrud/getRecordById",
data: dataread,
dataType: "text",
success: function(data) {
var resultE = JSON.parse(data);
console.log(data);
$("#nameE").val(resultE[0].name);
$("#emailE").val(resultE[0].email);
},
error: function(textStatus, errorThrown) {
console.log("AJAX Request Failed:");
console.log("Status:", textStatus);
console.log("Error:", errorThrown);
}
});
});
$(document).on("click", ".update", function() {
var uid = $(this).val();
var nameOfUser = $("#nameE").val();
var email = $("#emailE").val();
var dataUpdate = {
id: uid,
name: nameOfUser,
email: email
};
console.log(dataUpdate);
$.ajax({
type: "POST",
url: "http://localhost/CRUD_CodeIgniter/AjaxCrud/updateData",
data: dataUpdate,
dataType: "text",
success: function(data) {
console.log(data);
if (data) {
getAllRecords();
$("#exampleModalEdit").modal("hide");
}
},
error: function(textStatus, errorThrown) {
console.log("AJAX Request Failed:");
console.log("Status:", textStatus);
console.log("Error:", errorThrown);
}
});
});
});
</script>
</body>
</html>
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Comments
Post a Comment