PHP - OOP CRUD Operation

Submitted by nurhodelta_17 on Friday, October 27, 2017 - 17:16.

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;
crudoop

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

Our index that contains our sample table. 
  1. <?php 
  2. 	include('conn.php');
  3. 	session_start();
  4. ?>
  5. <!DOCTYPE html>
  6. <html>
  7. <head>
  8. 	<title>PHP - OOP CRUD Operation</title>
  9. 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  10. 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  11. 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  12. </head>
  13. <body>
  14. <div class="container">
  15. 	<div style="height:50px;"></div>
  16. 	<div class="well" style="margin-left:auto; margin-right:auto; padding:auto; width:70%;">
  17. 		<span style="font-size:25px; color:blue"><strong>PHP - OOP CRUD Operation</strong></span>	
  18. 		<span class="pull-right"><a href="#addnew" data-toggle="modal" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span> Add New</a></span>
  19. 		<div style="height:15px;"></div>
  20. 		<table class="table table-striped table-bordered table-hover">
  21. 			<thead>
  22. 				<th>Firstname</th>
  23. 				<th>Lastname</th>
  24. 				<th>Action</th>
  25. 			</thead>
  26. 			<tbody>
  27. 			<?php
  28. 				$query=$conn->query("select * from `member`");
  29. 				while($row=$query->fetch_array()){
  30. 					?>
  31. 					<tr>
  32. 						<td><?php echo $row['firstname']; ?></td>
  33. 						<td><?php echo $row['lastname']; ?></td>
  34. 						<td>
  35. 							<a href="#edit<?php echo $row['memberid']; ?>" data-toggle="modal" class="btn btn-warning"><span class="glyphicon glyphicon-edit"></span> Edit</a> || 
  36. 							<a href="#del<?php echo $row['memberid']; ?>" data-toggle="modal" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> Delete</a>
  37. 							<?php include('button.php'); ?>
  38. 						</td>
  39. 					</tr>
  40. 					<?php
  41. 				}
  42.  
  43. 			?>
  44. 			</tbody>
  45. 		</table>
  46. 		<?php
  47. 			if(isset($_SESSION['msg'])){
  48. 				?>
  49. 					<div class="alert alert-success">
  50. 						<center><?php echo $_SESSION['msg']; ?></center>
  51. 					</div>
  52. 				<?php
  53. 				unset($_SESSION['msg']);
  54. 			}
  55. 		?>
  56. 	</div>
  57. 	<?php include('add_modal.php'); ?>
  58. </div>
  59. </body>
  60. </html>

add_modal.php

This is our modal for our add function. 
  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 method="POST" action="addnew.php">
  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">
  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">
  27. 						</div>
  28. 					</div>
  29. 					<div style="height:10px;"></div>
  30.                 </div> 
  31. 				</div>
  32.                 <div class="modal-footer">
  33.                     <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
  34.                     <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Save</a>
  35. 				</form>
  36.                 </div>
  37.  
  38.             </div>
  39.         </div>
  40.     </div>

addnew.php

This is our add code. 
  1. <?php
  2. 	include('conn.php');
  3. 	session_start();
  4.  
  5. 	$firstname=$_POST['firstname'];
  6. 	$lastname=$_POST['lastname'];
  7.  
  8. 	$conn->query("insert into member (firstname, lastname) values ('$firstname', '$lastname')");
  9. 	$_SESSION['msg']="Member Added Succesfully";
  10. 	header('location:index.php');
  11.  
  12. ?>

button.php

This contains our edit and delete modal. 
  1. <!-- Delete -->
  2.     <div class="modal fade" id="del<?php echo $row['memberid']; ?>" 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">Delete Member</h4></center>
  8.                 </div>
  9.                 <div class="modal-body">
  10. 				<?php
  11. 					$del=mysqli_query($conn,"select * from member where memberid='".$row['memberid']."'");
  12. 					$drow=mysqli_fetch_array($del);
  13. 				?>
  14. 				<div class="container-fluid">
  15. 					<h5><center>Firstname: <strong><?php echo $drow['firstname']; ?></strong></center></h5> 
  16.                 </div> 
  17. 				</div>
  18.                 <div class="modal-footer">
  19.                     <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
  20.                     <a href="delete.php?id=<?php echo $row['memberid']; ?>" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> Delete</a>
  21.                 </div>
  22.  
  23.             </div>
  24.         </div>
  25.     </div>
  26. <!-- /.modal -->
  27.  
  28. <!-- Edit -->
  29.     <div class="modal fade" id="edit<?php echo $row['memberid']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  30.         <div class="modal-dialog">
  31.             <div class="modal-content">
  32.                 <div class="modal-header">
  33.                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  34.                     <center><h4 class="modal-title" id="myModalLabel">Edit Member</h4></center>
  35.                 </div>
  36.                 <div class="modal-body">
  37. 				<?php
  38. 					$edit=$conn->query("select * from member where memberid='".$row['memberid']."'");
  39. 					$erow=$edit->fetch_array();
  40. 				?>
  41. 				<div class="container-fluid">
  42. 				<form method="POST" action="edit.php?id=<?php echo $erow['memberid']; ?>">
  43. 					<div class="row">
  44. 						<div class="col-md-2">
  45. 							<label style="position:relative; top:7px;">Firstname:</label>
  46. 						</div>
  47. 						<div class="col-md-10">
  48. 							<input type="text" name="firstname" class="form-control" value="<?php echo $erow['firstname']; ?>">
  49. 						</div>
  50. 					</div>
  51. 					<div style="height:10px;"></div>
  52. 					<div class="row">
  53. 						<div class="col-md-2">
  54. 							<label style="position:relative; top:7px;">Lastname:</label>
  55. 						</div>
  56. 						<div class="col-md-10">
  57. 							<input type="text" name="lastname" class="form-control" value="<?php echo $erow['lastname']; ?>">
  58. 						</div>
  59. 					</div>
  60.                 </div> 
  61. 				</div>
  62.                 <div class="modal-footer">
  63.                     <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
  64.                     <button type="submit" class="btn btn-warning"><span class="glyphicon glyphicon-check"></span> Save</button>
  65.                 </div>
  66. 				</form>
  67.             </div>
  68.         </div>
  69.     </div>
  70. <!-- /.modal -->

edit.php

Our update code. 
  1. <?php
  2. 	include('conn.php');
  3. 	session_start();
  4.  
  5. 	$id=$_GET['id'];
  6. 	$firstname=$_POST['firstname'];
  7. 	$lastname=$_POST['lastname'];
  8.  
  9. 	$conn->query("update member set firstname='$firstname', lastname='$lastname' where memberid='$id'");
  10. 	$_SESSION['msg']="Member Updated Succesfully";
  11. 	header('location:index.php');
  12.  
  13. ?>

delete.php

Lastly, this is our delete code. 
  1. <?php
  2. 	include('conn.php');
  3. 	session_start();
  4.  
  5. 	$id=$_GET['id'];
  6.  
  7. 	$conn->query("delete from member where memberid='$id'");
  8. 	$_SESSION['msg']="Member Deleted Succesfully";
  9. 	header('location:index.php');
  10. ?>
That ends this tutorial. If you any question, suggestion or comment, 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 byChuperto (not verified)on Sat, 11/09/2019 - 08:18

Gracias maje por todo se te agradecer sigue asi

Add new comment

About text formats