index.php
<head>
<title>CRUD Tutorial</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<div style="padding:30px" class="container card">
<?php
if(isset($_GET['success'])){ ?>
<div id="" style="padding:10px; background:green; color:white">
Data Deleted Successfully !
</div>
<?php }
?>
<div id="notification" style="padding:10px"></div>
<h3>Registration Form</h3> <br/>
<div>
<label>Name</label>
<input type="text" name="name" class="form-control" id="name" />
</div><br/>
<div>
<label>Email</label>
<input type="text" name="email" class="form-control" id="email" />
</div><br/>
<br/>
<button id="submit" class="btn btn-primary">Submit</button>
</div>
<br/>
<div style="padding:30px">
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody id="loadData">
</tbody>
</table>
</div>
<!-- code for fetch data -->
<script type="text/javascript">
function loadData(){
$.ajax({
url:'fetch.php',
type:'POST',
success:function(data){
$('#loadData').html(data);
}
});
}
$(document).ready(function(){
loadData();
});
</script>
<!-- code for insert data -->
<script type="text/javascript">
$(document).ready(function(){
$('#submit').click(function(){
let name = $('#name').val();
let email = $('#email').val();
$.ajax({
url:'submit.php',
method:'POST',
data:{name: name, email: email},
beforeSend:function(){
$('#submit').html('Loading…');
$('#submit').css('background', '#ccc');
$('#submit').css('border', 'none');
$('#submit').css('pointer-events', 'none');
},
success:function(data){
if(data == 200){
$('#notification').show();
$('#notification').css('background', 'green');
$('#notification').css('color', 'white');
$('#notification').text('Data Inserted Successfully !');
$('#submit').html('Submit');
$('#submit').css('background', 'green');
$('#submit').css('border', 'none');
$('#submit').css('pointer-events', '');
loadData();
}
else{
$('#notification').show();
$('#notification').css('background', 'red');
$('#notification').css('color', 'white');
$('#notification').text('Something went wrong !');
loadData();
}
}
});
});
});
</script>
fetch.php
<?php
include('dbcon.php');
$sql = "SELECT * FROM students";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
?>
<tr>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['email']; ?></td>
<td><a class="btn btn-success" href="edit.php?id=<?php echo $row['id']; ?>">Edit</a> <a class="btn btn-danger" href="delete.php?id=<?php echo $row['id']; ?>">Delete</a></td>
</tr>
<?php
}
}
else{
echo "<tr><td>0 results</td><td></td><td></td></tr>";
}
$conn->close();
?>
submit.php
<?php
$name = $_POST['name'];
$email = $_POST['email'];
include('dbcon.php');
$sql = "INSERT INTO students (name, email)
VALUES ('$name', '$email')";
if (mysqli_query($conn, $sql)) {
echo "200";
} else {
echo "500";
}
mysqli_close($conn);
?>
delete.php
<?php
include('dbcon.php');
$id = $_GET['id'];
$sql = "DELETE FROM students WHERE id=$id";
if ($conn->query($sql) === TRUE) {
$_SESSION["delete_msg"] = "Data Deleted Successfully !";
Header( 'Location: index.php?success=1' );
} else {
echo "Error deleting record: " . $conn->error;
}
$conn->close();
?>
edit.php
<head>
<title>CRUD Tutorial</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<?php
$id = $_GET['id'];
?>
<?php
include('dbcon.php');
$sql = "SELECT * FROM students WHERE id=$id";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
?>
<div class="container card" style="padding:30px">
<div id="notification" style="padding:10px"></div>
<h3>Update Form</h3> <br/>
<div class="form-control">
<label>Name</label>
<input type="text" id="name" class="form-control" value="<?php echo $row['name']; ?>" />
<input type="hidden" id="id" value="<?php echo $row['id']; ?>">
</div><br/>
<div class="form-control">
<label>Email</label>
<input type="text" id="email" class="form-control" value="<?php echo $row['email']; ?>" />
</div><br/>
<br/>
<button class="btn btn-primary" id="submit">Update</button>
</form>
</div>
<?php
}
}
$conn->close();
?>
<!-- code for insert data -->
<script type="text/javascript">
$(document).ready(function(){
$('#submit').click(function(){
let name = $('#name').val();
let email = $('#email').val();
let id = $('#id').val();
$.ajax({
url:'update.php',
method:'POST',
data:{id: id, name: name, email: email},
beforeSend:function(){
$('#submit').html('Loading…');
$('#submit').css('background', '#ccc');
$('#submit').css('border', 'none');
$('#submit').css('pointer-events', 'none');
},
success:function(data){
if(data == 200){
$('#notification').show();
$('#notification').css('background', 'green');
$('#notification').css('color', 'white');
$('#notification').text('Data Inserted Successfully !');
$('#submit').html('Submit');
$('#submit').css('background', 'green');
$('#submit').css('border', 'none');
$('#submit').css('pointer-events', 'painted');
loadData();
}
else{
$('#notification').show();
$('#notification').css('background', 'red');
$('#notification').css('color', 'white');
$('#notification').text('Something went wrong !');
loadData();
}
}
});
});
});
</script>
