PHP - OOP CRUD Operation using AJAX/jQuery

Submitted by nurhodelta_17 on Saturday, October 28, 2017 - 19:48.

Language

Getting Started

Please take note that CSS and jQuery used in this tutorial are hosted so you need internet connection for them to work.

Creating our Database

First step is to create our database. 1. Open phpMyAdmin. 2. Click databases, create a database and name it as crud_oop. 3. After creating a database, click the SQL and paste the below codes. See image below for detailed instruction. 
  1. CREATE TABLE `member` (
  2.   `memberid` INT(11) NOT NULL AUTO_INCREMENT,
  3.   `firstname` VARCHAR(50) NOT NULL,
  4.   `lastname` VARCHAR(50) NOT NULL,
  5. PRIMARY KEY(`memberid`)
  6. ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
crudoopajax

Creating our Connection

Next, we create our connection to our database. This will serve as the bridge between our forms and database. We name this as conn.php. 
  1. <?php
  2.  
  3. $conn = new mysqli("localhost", "root", "", "crud_oop");
  4.  
  5. if ($conn->connect_error) {
  6.     die("Connection failed: " . $conn->connect_error);
  7. }
  8.  
  9. ?>

index.php

We create our index that contains our table. 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<title>PHP - OOP CRUD Operation using AJAX/jQuery</title>
  5. 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  6. 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  7. 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  8. </head>
  9. <body>
  10. 	<body>
  11. <div class="container">
  12. 	<div style="height:50px;"></div>
  13. 	<div class="well" style="margin-left:auto; margin-right:auto; padding:auto; width:70%;">
  14. 		<span style="font-size:25px; color:blue"><strong>PHP - OOP CRUD Operation using AJAX/jQuery</strong></span>	
  15. 		<span class="pull-right"><a id="add" style="cursor:pointer;" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span> Add New</a></span>
  16. 		<div style="height:15px;"></div>
  17. 		<div id="table"></div>
  18. 		<div id="alert" class="alert alert-success" style="display:none;">
  19. 			<center><span id="alerttext"></span></center>
  20. 		</div>
  21. 	</div>
  22. 	<?php include('modal.php'); ?>
  23. 	<script src="custom.js"></script>
  24. </div>
  25. </body>
  26. </html>

custom.js

This contains our AJAX and jQuery codes. 
  1. $(document).ready(function(){
  2. 	showTable();
  3.  
  4. 	//add
  5. 	$('#add').click(function(){
  6. 		$('#addnew').modal('show');
  7. 		$('#addForm')[0].reset();
  8. 	});
  9.  
  10. 	$('#addbutton').click(function(){
  11. 		var first = $('#firstname').val();
  12. 		var last = $('#lastname').val();
  13. 		if(first!='' && last!==''){
  14. 			var addForm = $('#addForm').serialize();
  15. 			$.ajax({
  16. 				type: 'POST',
  17. 				url: 'add.php',
  18. 				data: addForm,
  19. 				success:function(){
  20. 					$('#addnew').modal('hide');
  21. 					$('#addForm')[0].reset();
  22. 					showTable();
  23. 					$('#alert').slideDown();
  24. 					$('#alerttext').text('Member Added Successfully');
  25. 				}
  26. 			});
  27. 		}
  28. 		else{
  29. 			alert('Please input both Fields')
  30. 		}
  31.  
  32. 	});
  33. 	//
  34. 	//edit
  35. 	$(document).on('click', '.edit', function(){
  36. 		var memid = $(this).data('id');
  37. 		var first = $('#first'+memid).text();
  38. 		var last = $('#last'+memid).text();
  39. 		$('#editmem').modal('show');
  40. 		$('#efirstname').val(first);
  41. 		$('#elastname').val(last);
  42. 		$('#editbutton').val(memid);
  43. 	});
  44.  
  45. 	$('#editbutton').click(function(){
  46. 		var memid = $(this).val();
  47. 		var editForm = $('#editForm').serialize();
  48. 		$.ajax({
  49. 			type: 'POST',
  50. 			url: 'edit.php',
  51. 			data: editForm + "&memid="+memid,
  52. 			success:function(){
  53. 				$('#editmem').modal('hide');
  54. 				$('#editForm')[0].reset();
  55. 				showTable();
  56. 				$('#alert').slideDown();
  57. 				$('#alerttext').text('Member Updated Successfully');
  58. 			}
  59. 		});
  60. 	});
  61. 	//
  62. 	//delete
  63. 	$(document).on('click', '.delete', function(){
  64. 		var memid = $(this).data('id');
  65. 		var first = $('#first'+memid).text();
  66. 		$('#delmem').modal('show');
  67. 		$('#dfirstname').text(first);
  68. 		$('#delbutton').val(memid);
  69. 	});
  70.  
  71. 	$('#delbutton').click(function(){
  72. 		var memid = $(this).val();
  73. 		$.ajax({
  74. 			type: 'POST',
  75. 			url: 'delete.php',
  76. 			data: {
  77. 				memid: memid,
  78. 			},
  79. 			success:function(){
  80. 				$('#delmem').modal('hide');
  81. 				showTable();
  82. 				$('#alert').slideDown();
  83. 				$('#alerttext').text('Member Deleted Successfully');
  84. 			}
  85. 		});
  86. 	});
  87.  
  88. });
  89.  
  90. function showTable(){
  91. 	$.ajax({
  92. 		type: 'POST',
  93. 		url: 'fetch.php',
  94. 		data: {
  95. 			fetch: 1
  96. 		},
  97. 		success:function(data){
  98. 			$('#table').html(data);
  99. 		}
  100. 	});
  101. }

fetch.php

This is our code in fetching table data from our database. 
  1. <?php
  2. 	include('conn.php');
  3. 	if(isset($_POST['fetch'])){
  4. 		?>
  5. 		<table class="table table-striped table-bordered table-hover">
  6. 			<thead>
  7. 				<th>Firstname</th>
  8. 				<th>Lastname</th>
  9. 				<th>Action</th>
  10. 			</thead>
  11. 			<tbody>
  12. 			<?php
  13. 				$query=$conn->query("select * from `member`");
  14. 				while($row=$query->fetch_array()){
  15. 					?>
  16. 					<tr>
  17. 						<td><span id="first<?php echo $row['memberid']; ?>"><?php echo $row['firstname']; ?></span></td>
  18. 						<td><span id="last<?php echo $row['memberid']; ?>"><?php echo $row['lastname']; ?></span></td>
  19. 						<td>
  20. 							<a style="cursor:pointer;" class="btn btn-warning edit" data-id="<?php echo $row['memberid']; ?>"><span class="glyphicon glyphicon-edit"></span> Edit</a> || 
  21. 							<a style="cursor:pointer;" class="btn btn-danger delete" data-id="<?php echo $row['memberid']; ?>"><span class="glyphicon glyphicon-trash"></span> Delete</a>
  22. 						</td>
  23. 					</tr>
  24. 					<?php
  25. 				}
  26.  
  27. 			?>
  28. 			</tbody>
  29. 		</table>
  30. 		<?php
  31. 	}
  32. ?>

modal.php

This contains our add, edit and delete modal. 
  1. <!-- Add New -->
  2.     <div class="modal fade" id="addnew" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  3.         <div class="modal-dialog">
  4.             <div class="modal-content">
  5.                 <div class="modal-header">
  6.                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  7.                     <center><h4 class="modal-title" id="myModalLabel">Add New Member</h4></center>
  8.                 </div>
  9.                 <div class="modal-body">
  10. 				<div class="container-fluid">
  11. 				<form id="addForm">
  12. 					<div class="row">
  13. 						<div class="col-md-2">
  14. 							<label class="control-label" style="position:relative; top:7px;">Firstname:</label>
  15. 						</div>
  16. 						<div class="col-md-10">
  17. 							<input type="text" class="form-control" name="firstname" id="firstname">
  18. 						</div>
  19. 					</div>
  20. 					<div style="height:10px;"></div>
  21. 					<div class="row">
  22. 						<div class="col-md-2">
  23. 							<label class="control-label" style="position:relative; top:7px;">Lastname:</label>
  24. 						</div>
  25. 						<div class="col-md-10">
  26. 							<input type="text" class="form-control" name="lastname" id="lastname">
  27. 						</div>
  28. 					</div>
  29.                 </div> 
  30. 				</div>
  31.                 <div class="modal-footer">
  32.                     <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
  33.                     <button type="button" id="addbutton" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Save</a>
  34. 				</form>
  35.                 </div>
  36.  
  37.             </div>
  38.         </div>
  39.     </div>
  40.  
  41. <!-- Edit -->
  42.     <div class="modal fade" id="editmem" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  43.         <div class="modal-dialog">
  44.             <div class="modal-content">
  45.                 <div class="modal-header">
  46.                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  47.                     <center><h4 class="modal-title" id="myModalLabel">Edit Member</h4></center>
  48.                 </div>
  49.                 <div class="modal-body">
  50. 				<div class="container-fluid">
  51. 				<form id="editForm">
  52. 					<div class="row">
  53. 						<div class="col-md-2">
  54. 							<label class="control-label" style="position:relative; top:7px;">Firstname:</label>
  55. 						</div>
  56. 						<div class="col-md-10">
  57. 							<input type="text" class="form-control" name="efirstname" id="efirstname">
  58. 						</div>
  59. 					</div>
  60. 					<div style="height:10px;"></div>
  61. 					<div class="row">
  62. 						<div class="col-md-2">
  63. 							<label class="control-label" style="position:relative; top:7px;">Lastname:</label>
  64. 						</div>
  65. 						<div class="col-md-10">
  66. 							<input type="text" class="form-control" name="elastname" id="elastname">
  67. 						</div>
  68. 					</div>
  69.                 </div> 
  70. 				</div>
  71.                 <div class="modal-footer">
  72.                     <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
  73.                     <button type="button" id="editbutton" class="btn btn-warning"><span class="glyphicon glyphicon-check"></span> Update</a>
  74. 				</form>
  75.                 </div>
  76.  
  77.             </div>
  78.         </div>
  79.     </div>
  80.  
  81. <!-- Delete -->
  82.     <div class="modal fade" id="delmem" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  83.         <div class="modal-dialog">
  84.             <div class="modal-content">
  85.                 <div class="modal-header">
  86.                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  87.                     <center><h4 class="modal-title" id="myModalLabel">Delete Member</h4></center>
  88.                 </div>
  89.                 <div class="modal-body">
  90. 				<div class="container-fluid">
  91. 					<h5><center>Firstname: <strong><span id="dfirstname"></span></strong></center></h5> 
  92.                 </div> 
  93. 				</div>
  94.                 <div class="modal-footer">
  95.                     <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
  96.                     <button type="button" id="delbutton" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> Delete</button>
  97.                 </div>
  98.  
  99.             </div>
  100.         </div>
  101.     </div>

add.php

This is our code in adding data to our database. 
  1. <?php
  2. 	include('conn.php');
  3. 	if(isset($_POST['firstname'])){
  4. 		$firstname=$_POST['firstname'];
  5. 		$lastname=$_POST['lastname'];
  6.  
  7. 		$conn->query("insert into member (firstname, lastname) values ('$firstname', '$lastname')");
  8. 	}
  9.  
  10. ?>

edit.php

This is our code in updating existing row in our database. 
  1. <?php
  2. 	include('conn.php');
  3. 	if(isset($_POST['efirstname'])){
  4. 		$firstname=$_POST['efirstname'];
  5. 		$lastname=$_POST['elastname'];
  6. 		$memid=$_POST['memid'];
  7.  
  8. 		$conn->query("update member set firstname='$firstname', lastname='$lastname' where memberid='$memid'");
  9. 	}
  10. ?>

delete.php

Lastly, our code in deleting rows. 
  1. <?php
  2. 	include('conn.php');
  3. 	if(isset($_POST['memid'])){
  4. 		$memid=$_POST['memid'];
  5.  
  6. 		$conn->query("delete from member where memberid='$memid'");
  7. 	}
  8. ?>
That ends this tutorial. If you have any comment, suggestion or question, feel free to write it below or message me. Happy Coding :)

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Tags

Comments

Submitted bySk Washoeon Sun, 09/15/2019 - 23:39

Hae sourcecoders Gurus, I really appreciate your excellent work. Your codes have helpes me a lot in my process of learning php.

Add new comment

About text formats