PHP CRUD with ajax

by

हेल्लो दोस्तों आज के पोस्ट में हम आपको php crud के बारे में बतायेंगे की कैसे किया जाता है साथ ही इसका प्रोग्राम के साथ आप इसका आउटपुट को भी देख सकते है

PHP CRUD with ajax

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		
		.outer
		{
			height: 500px;
			width: 400px;
            margin:10px auto;
			background-color: skyblue;
			padding: 20px 30px;
			box-sizing: border-box;
		}
		.outer input
		{
			height: 30px;
			width: 100%;
			margin-bottom: 16px;
		}
		.outer .btn
		{
			height: 35px;
			width: 102%;
			background-color: orangered;
			border: none;
			color: #fff;
			font-size: 16px;
		}
		.outer h2
		{
			text-align: center;
			color: orangered;
		}

	</style>
</head>
<body>
	<div class="outer">
		<h2>REGISTRATION FORM</h2>
		<form id="ajax_form">
			Name <br><input type="text" placeholder="Enter name" name="name" id="name"><br>
			<input type="hidden"  name="id" id="id">

            <!-- <span><?php echo $username; ?></span> -->
			Email <br><input type="email" placeholder="Enter email" id="email" name="email"><br>
            <!-- <span><?php echo $pass_msg; ?></span> -->
			Mobile No <br><input type="number" placeholder="Enter Mobile no" id="mobile" name="mobile"><br>
			Password <br><input type="password" placeholder="Enter Password" id="pass" name="pass"><br>
			<input type="submit" value="submit" class="btn">
		</form>
	</div>
    <br>
    <div id="showdata">
    
    </div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>

 <script>
        $(Document).ready(function(){
            showdata();
        });

		function showdata(){
			$.ajax({
                url:'showdata.php',
                type:'get',
                success:function(response){
                    $('#showdata').html(response);
                }
            });
		}

        $('#ajax_form').on('submit',function(e){
            e.preventDefault();
            jQuery.ajax({
                url:'insert.php',
                type:'post',
                data: new FormData(this),
                processData:false,
                contentType:false,
                success:function(response){
                    var resp = JSON.parse(response);
                    if(resp.status == true && resp.status_code == 200){
                        alert(resp.message);
                        $('#ajax_form').trigger('reset');
						showdata();
                    }else if(resp.status == false && resp.status_code == 201){
                        alert(resp.message);
						showdata();
                    }
                    
                }
            });
        });
    var deleteData=(id)=>   // arrow function define 
	{
		var comfirm1 = confirm("are you want to delete item");
		 if(comfirm1 == true){
		 	jQuery.ajax({
                url:'delete.php',
                type:'post',
                data: {id:id},//right side id must be same 
                // processData:false,
                // contentType:false,
                success:function(response){
                    var resp = JSON.parse(response);
                    if(resp.status == true && resp.status_code == 200){
                        alert(resp.message);
                        $('#ajax_form').trigger('reset');
						showdata();
                    }else if(resp.status == false && resp.status_code == 201){
                        alert(resp.message);
						showdata();
                    }
                    
                }
            });
		 }else{
		 	alert('sorry dont delete please try again');
		 }
		
	}
	var edit=(id)=>
	{
		// alert(id); //this
		jQuery.ajax({
                url:'edit.php',
                type:'POST',
                data: {id:id},
                success:function(response){
					console.log(response);
                    var resp = JSON.parse(response);
                    if(resp.status == true && resp.status_code == 200){
                       $("#name").val(resp.data.name);
					   $("#email").val(resp.data.email);
					   $("#id").val(resp.data.id);
					   $("#mobile").val(resp.data.mobile);
					   $("#pass").val(resp.data.password);//password it means response 
                    }else if(resp.status == false && resp.status_code == 201){
                        alert(resp.message);
						showdata();
                    }
                    
                }
            });
	}
    </script>

<?php
$servername = "localhost:3306";
$username = "root";
$password = "";
$database = "crud";

// Create connection
$conn = mysqli_connect($servername,$username,$password,$database);

// Check connection
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}
// echo "Connected successfully";
?>
<?php
if($_SERVER['REQUEST_METHOD'])
if(empty($_POST['name'])){
    $username="please enter the username";
}
if(empty($_POST['password']))
{
    $pass_msg="please enter the password";
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		
		.outer
		{
			height: 500px;
			width: 400px;
            margin:10px auto;
			background-color: skyblue;
			padding: 20px 30px;
			box-sizing: border-box;
		}
		.outer input
		{
			height: 30px;
			width: 100%;
			margin-bottom: 16px;
		}
		.outer .btn
		{
			height: 35px;
			width: 102%;
			background-color: orangered;
			border: none;
			color: #fff;
			font-size: 16px;
		}
		.outer h2
		{
			text-align: center;
			color: orangered;
		}

	</style>
</head>
<body>
	<div class="outer">
		<h2>REGISTRATION FORM</h2>
		<form id="ajax_form">
			Name <br><input type="text" placeholder="Enter name" name="name" id="name"><br>
			<input type="hidden"  name="id" id="id">

            <!-- <span><?php echo $username; ?></span> -->
			Email <br><input type="email" placeholder="Enter email" id="email" name="email"><br>
            <!-- <span><?php echo $pass_msg; ?></span> -->
			Mobile No <br><input type="number" placeholder="Enter Mobile no" id="mobile" name="mobile"><br>
			Password <br><input type="password" placeholder="Enter Password" id="pass" name="pass"><br>
			<input type="submit" value="submit" class="btn">
		</form>
	</div>
    <br>
    <div id="showdata">
    
    </div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(Document).ready(function(){
            showdata();
        });

		function showdata(){
			$.ajax({
                url:'showdata.php',
                type:'get',
                success:function(response){
                    $('#showdata').html(response);
                }
            });
		}

        $('#ajax_form').on('submit',function(e){
            e.preventDefault();
            jQuery.ajax({
                url:'insert.php',
                type:'post',
                data: new FormData(this),
                processData:false,
                contentType:false,
                success:function(response){
                    var resp = JSON.parse(response);
                    if(resp.status == true && resp.status_code == 200){
                        alert(resp.message);
                        $('#ajax_form').trigger('reset');
						showdata();
                    }else if(resp.status == false && resp.status_code == 201){
                        alert(resp.message);
						showdata();
                    }
                    
                }
            });
        });
    var deleteData=(id)=>   // arrow function define 
	{
		var comfirm1 = confirm("are you want to delete item");
		 if(comfirm1 == true){
		 	jQuery.ajax({
                url:'delete.php',
                type:'post',
                data: {id:id},//right side id must be same 
                // processData:false,
                // contentType:false,
                success:function(response){
                    var resp = JSON.parse(response);
                    if(resp.status == true && resp.status_code == 200){
                        alert(resp.message);
                        $('#ajax_form').trigger('reset');
						showdata();
                    }else if(resp.status == false && resp.status_code == 201){
                        alert(resp.message);
						showdata();
                    }
                    
                }
            });
		 }else{
		 	alert('sorry dont delete please try again');
		 }
		
	}
	var edit=(id)=>
	{
		// alert(id); //this
		jQuery.ajax({
                url:'edit.php',
                type:'POST',
                data: {id:id},
                success:function(response){
					console.log(response);
                    var resp = JSON.parse(response);
                    if(resp.status == true && resp.status_code == 200){
                       $("#name").val(resp.data.name);
					   $("#email").val(resp.data.email);
					   $("#id").val(resp.data.id);
					   $("#mobile").val(resp.data.mobile);
					   $("#pass").val(resp.data.password);//password it means response 
                    }else if(resp.status == false && resp.status_code == 201){
                        alert(resp.message);
						showdata();
                    }
                    
                }
            });
	}
    </script>
</body>
</html>

<?php
include "connection.php";

$id=$_POST['id'];
$sql="SELECT * FROM student where id='$id';";
if($result1=mysqli_query($conn,$sql))
{
    $show=mysqli_fetch_assoc($result1);

    $rasp = array('status'=>true,'status_code'=>200,'message'=>
    'Data delete Successfully','data'=>$show);
}else
{
    $rasp = array('status'=>false,'status_code'=>201,'message'=>'somthings is wrongs');

}
echo json_encode($rasp);
?>

<?php

include "connection.php";

$name=$_POST['name'];
$id=$_POST['id'];
$email=$_POST['email'];
$mobile=$_POST['mobile'];
$password=$_POST['pass'];
$password1=md5($password);
if(!empty($name) && !empty($password1) && !empty($mobile) && !empty($email)){
    if(empty($id)){
        $sql="INSERT INTO student(name,email,mobile,password) values('$name','$email','$mobile','$password1')";

    }else
    {
        $sql="UPDATE student set name='$name',email='$email',mobile='$mobile' where id='$id';";
    }
    if(mysqli_query($conn,$sql)){
        $rasp = array('status'=>true,'status_code'=>200,'message'=>'Data Insert Successfully');
    }else{
        $rasp = array('status'=>false,'status_code'=>201,'message'=>"Can't Insert Data");
    }
}else{
    $rasp = array('status'=>false,'status_code'=>201,'message'=>"Fill All Inputs");
}
echo json_encode($rasp);



?>

<?php
include "connection.php";


$sql = "select * from student";
$result = mysqli_query($conn,$sql);
echo "<h2 align='center'>All Records</h2>"; 
 echo "<table border='1px' cellspacing='0px' cellpadding='10px' bgcolor='orange' width='100%'>
			<tr>
				<th>Id</th>
				<th>Name</th>
				<th>Email</th>
				<th>Mobile</th>
				<th>edit</th>
				<th>delete</th>

			</tr>";
if (mysqli_num_rows($result)>0) {
	while ($row = mysqli_fetch_assoc($result)) {
	echo "<tr>
     <td>".$row['id']." </td>
     <td>".$row['name']." </td>
     <td>".$row['email']." </td>
     <td>".$row['mobile']." </td>
     <td><button  onclick='edit(".$row['id'].")' href='#ajax_form'>edit</button></td>
     <td><button onclick='deleteData(".$row['id'].")'>delete</button></td>

     <tr>";
   }
   echo "</table>";
}

<?php
include "connection.php";

$id=$_POST['id'];
$sql="SELECT * FROM student where id='$id';";
if($result1=mysqli_query($conn,$sql))
{
    $show=mysqli_fetch_assoc($result1);

    $rasp = array('status'=>true,'status_code'=>200,'message'=>
    'Data delete Successfully','data'=>$show);
}else
{
    $rasp = array('status'=>false,'status_code'=>201,'message'=>'somthings is wrongs');

}
echo json_encode($rasp);
?>

Leave a Comment