PHP Crud operation Insert,Edit,Update,Delete

In this post you can know about crud operation in PHP inserting, editing, Updating and Deleting in a single page.

User can save a dynamic data or content in a database and show the data on web page, user can also deleting a any of data from database and also editing or updating a data from a single page.

First create a database name crud and create a table name = data\

  • id - int(18)
  • name - varchar(200)
  • address - varchar(200)
  • mobile_number - varchar(200)

Then Create database connectivity file = db.php

db.php

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "crud";
// Create connection
$conn =  mysqli_connect($servername,$username,$password,"$dbname");
if (!$conn) {
	
	die("Could Not Connect:" .mysqli_connect_error());
}
?>

Now Create index.php for show data, For inserting data, editing data, updating data, deleting data

Index.php

<?php
include 'all_process.php';
if (isset($_GET['edit'])) {
		$id = $_GET['edit'];
		$edit_state = true;
		
		$record = mysqli_query($conn, "SELECT * FROM data WHERE id=$id");
$data = mysqli_fetch_array($record);
			$name = $data['name'];
			$address = $data['address'];
			$mobile_number = $data['mobile_number'];
		
	}
?>
<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="style.css">
	<title>Crud Operation In PHP</title>
</head>
<body>
<center>
	<?php if (isset($_SESSION['message'])):?>
		<div class="message">
			<?php 
			echo $_SESSION['message']; 
			unset($_SESSION['message']); 
			?>
		</div>
	<?php endif ?>
	<h1>Crud Operation in PHP (makcode.in)</h1>
	 <form class="form-inline" method="POST" action="all_process.php">
	 	<input type="hidden" name="id" value="<?php echo $id; ?>">
	 	<input type="text" name="name" placeholder="Name" value="<?php echo $name; ?>">
	 	<input type="text" name="address" placeholder="Address" value="<?php echo $address; ?>">
	 	<input type="text" name="mobile_number" placeholder="Mobile Number" value="<?php echo $mobile_number; ?>">
	<?php if ($edit_state == false): ?>
	<button class="btn" type="submit" name="save" >Save</button>
<?php else: ?>
	<button class="btn" type="submit" name="update" >Update</button>
<?php endif ?>
	 	
	 </form>
<table>
	<tr>
		<th>Sr No</th>
		<th>Name</th>
		<th>Address</th>
		<th>Mobile Number</th>
		<th>Action</th>
	</tr>
	<?php
	$result = mysqli_query($conn, "SELECT * FROM data");
$i = 1;
while ($row = mysqli_fetch_assoc($result)) {
	?>
	<tr>
	<td><?php echo $i; ?></td>
	<td><?php echo $row["name"]; ?></td>
	<td><?php echo $row["address"]; ?></td>
	<td><?php echo $row["mobile_number"]; ?></td>
	<td><a href="index.php?edit=<?php echo $row["id"]; ?>" class="edit_btn">Edit</a></td>
	<td><a href="all_process.php?delete=<?php echo $row["id"]; ?>" class="del_btn">Delete</a></td>
	</tr>
	<?php
	$i++;
}
	?>
</table>
</center>
</body>
</html>

Now Create a all_process.php file for back process for deleting or updating and inserting.

all_process.php

<?php
session_start();
include_once 'db.php';
$name = "";
$address = "";
$mobile_number = "";
$id = 0;
$edit_state = false;
if (isset($_POST['save'])) {
	$name = $_POST['name'];
	$address = $_POST['address'];
	$mobile_number = $_POST['mobile_number'];
 $sql = "INSERT INTO data (name,address,mobile_number) VALUES ('$name','$address','$mobile_number')";
 if (mysqli_query($conn, $sql)) { 
 	$_SESSION['message'] = "Data Saved Successfully";
		header("Location: index.php");
	 } else {
		mysqli_close($conn);
	 }
	 
}
// For updating records
if (isset($_POST['update'])) {
	$id = $_POST['id'];
	$name = $_POST['name'];
	$address = $_POST['address'];
	$mobile_number = $_POST['mobile_number'];
	mysqli_query($conn, "UPDATE data SET name='$name', address='$address', mobile_number='$mobile_number' WHERE id=$id");
	$_SESSION['message'] = "Data Updated Successfully";
	header('location: index.php');
}
// For deleteing records
if (isset($_GET['delete'])) {
	$id = $_GET['delete'];
	mysqli_query($conn, "DELETE FROM data WHERE id=$id");
	$_SESSION['message'] = "Data Deleted Successfully";
	header('location:index.php');
}
?>

Create style.css for giving good interface to webpage

style.css

body {
	background-color: #eceaea;
	font-size: 19px;
}
table{
	width: 50%;
	margin: 30px auto;
	border-collapse: collapse;
	text-align: center;
}
tr{
	border-bottom: 1px solid #cbcbcb;
}
th, td {
	border: none;
	height: 30px;
	padding: 1px;
}
tr:hover {
	background: lightgrey;
}
form {
    width: 45%;
    margin: 20px auto;
    text-align: left;
    padding: 10px; 
    border: 1px solid #bbbbbb; 
    border-radius: 5px;
}
.input-group {
    margin: 10px 0px 10px 0px;
}
.input-group input {
    height: 30px;
    width: 93%;
    padding: 5px 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid gray;
}
.btn {
    padding: 10px;
    font-size: 15px;
    color: white;
    background: #5F9EA0;
    border: none;
    border-radius: 5px;
}
.edit_btn {
    text-decoration: none;
    padding: 2px 5px;
    background: #009688;
    color: white;
    border-radius: 20px;
}
.del_btn {
    text-decoration: none;
    padding: 2px 5px;
    color: white;
    border-radius: 20px;
    background: #a10a08;
}
.message {
    margin: 30px auto; 
    padding: 10px; 
    border-radius: 5px; 
    color: black; 
    background: lightgreen; 
    border: 1px solid #3c763d;
    width: 50%;
    text-align: center;
}
.text-danger
{
	font-size: 25px;
    color: white;
    border-radius: 5px;
    background: #2E8B57;
}
.addnewentry
{
    font-size: 15px;
    color: black;
    border-radius: 18px;
    background: #f44336;
}
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
.form-inline {  
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
.form-inline label {
  margin: 5px 10px 5px 0;
}
.form-inline input {
  vertical-align: middle;
  margin: 5px 10px 5px 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}
.form-inline button {
  padding: 10px 20px;
  background-color: #4caf50;
  border: 1px solid #ddd;
  color: white;
  cursor: pointer;
}
.form-inline button:hover {
  background-color: royalblue;
}
@media (max-width: 800px) {
  .form-inline input {
    margin: 10px 0;
  }
  
  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }