THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

CRUD Operation in PHP MySQLi with Code. Select Insert Update Delete in PHP MySQLi

CRUD Operation in PHP MySQL with Code. Select Insert Update Delete in PHP MySQLi


Welcome, all we will see how we can perform CRUD operation using PHP and MYSQL.
First of all, I already made a detailed video on it if you haven't watch it.

Below is the video link.



What is CRUD Operation and it is the most important part for any programmers?
CRUD full form is CREATE, READ, UPDATE & DELETE. So it is clear we have to first CREATE a database and a form. Which we can READ here we refer to both programmers and users those who interact with our sites. There must an option where the user can UPDATE the form details and also DELETE it.
All the features if available then that is called a perfect CRUD operation and this is what mostly backend developer deal with.

First, we will see the Database Part. So here is the con.php file. 

You have to make sure that your username and password is set or not. I mean I never set any username and password for my localhost. So that is the reason why you can see in mysqli_connect, I have written localhost and root, here the root is the username that is by default if you never set by your own. And there is no need to write password because it's empty by default but if you have one add it after the root. 

Also, make sure that your database name must me crudyoutube because below you can see I have written crudyoutube. If you want to write other names simply change the database name on PHPMyAdmin and add that here. 

<?php

$con = mysqli_connect('localhost','root');

mysqli_select_db($con,'crudyoutube');

?>

Fine, Here is the Insert.php file. Where we are actually inserting the Name and Password.

As you can see all the CDN link are already here in the code below. So no need to take from anywhere else just copy and paste it.

<?php

include 'conn.php';

if(isset($_POST['done'])){

$username = $_POST['username'];
$password = $_POST['password'];
$q = " INSERT INTO `crudtable`(`username`, `password`) VALUES ( '$username', '$password' )";

$query = mysqli_query($con,$q);
}
?>

<!DOCTYPE html>
<html>
<head>
<title></title>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="col-lg-6 m-auto">

<form method="post">

<br><br><div class="card">

<div class="card-header bg-dark">
<h1 class="text-white text-center">  Insert Operation </h1>
</div><br>

<label> Username: </label>
<input type="text" name="username" class="form-control"> <br>

<label> Password: </label>
<input type="text" name="password" class="form-control"> <br>

<button class="btn btn-success" type="submit" name="done"> Submit </button><br>

</div>
</form>
</div>
</body>
</html>

Display.php file

This is the main display page where we will show all the interface that we want too. We want to have a nice table where the user can see their Names, Password, Delete Button and Update Button. 


<!DOCTYPE html>
<html>
<head>
<title></title>

<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

 <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
   <script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>

</head>
<body>

<div class="container">
<div class="col-lg-12">
<br><br>
<h1 class="text-warning text-center" > Display Table Data </h1>
<br>
<table  id="tabledata" class=" table table-striped table-hover table-bordered">

<tr class="bg-dark text-white text-center">

<th> Id </th>
<th> Username </th>
<th> Password </th>
<th> Delete </th>
<th> Update </th>

</tr >

<?php

include 'conn.php';
$q = "select * from crudtable ";

$query = mysqli_query($con,$q);

while($res = mysqli_fetch_array($query)){
?>
<tr class="text-center">
<td> <?php echo $res['id'];  ?> </td>
<td> <?php echo $res['username'];  ?> </td>
<td> <?php echo $res['password'];  ?> </td>
<td> <button class="btn-danger btn"> <a href="delete.php?id=<?php echo $res['id']; ?>" class="text-white"> Delete </a>  </button> </td>
<td> <button class="btn-primary btn"> <a href="update.php?id=<?php echo $res['id']; ?>" class="text-white"> Update </a> </button> </td>

</tr>

<?php 
}
?>

</table>  

</div>
</div>

<script type="text/javascript">

$(document).ready(function(){
$('#tabledata').DataTable();
})

</script>

</body>
</html>

Delete.php file

Here If anytime user wants to delete any field by simply click on the delete button, the user can do it. Is it that simple? 

<?php

include 'conn.php';

$id = $_GET['id'];

$q = " DELETE FROM `crudtable` WHERE id = $id ";

mysqli_query($con, $q);

header('location:display.php');

?>

Update.php file

Here If anytime user wants to update any field by simply click on the update button, the user can do it. Is it that simple? You have to simply copy it and paste. This is the last part and I hope my video and source code helps you. 
<?php

include 'conn.php';

if(isset($_POST['done'])){

$id = $_GET['id'];
$username = $_POST['username'];
$password = $_POST['password'];
$q = " update crudtable set id=$id, username='$username', password='$password' where id=$id  ";

$query = mysqli_query($con,$q);

header('location:display.php');
}

?>

<!DOCTYPE html>
<html>
<head>
<title></title>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="col-lg-6 m-auto">

<form method="post">

<br><br><div class="card">

<div class="card-header bg-dark">
<h1 class="text-white text-center">  Update Operation </h1>
</div><br>

<label> Username: </label>
<input type="text" name="username" class="form-control"> <br>

<label> Password: </label>
<input type="text" name="password" class="form-control"> <br>

<button class="btn btn-success" type="submit" name="done"> Submit </button><br>

</div>
</form>
</div>
</body>
</html>

23 comments:

  1. hi how can you show the one you edit?

    value=" ">

    value=" ">

    but it doesn'y work. please help.

    ReplyDelete
  2. can you give Source Code for me brother

    ReplyDelete
  3. i am practicing but i have got an error .I can't solve it .can u help me

    ReplyDelete
  4. can you help me, the coding is okay but it doesnt do what it suppose to do

    ReplyDelete

  5. Warning: mysqli_fetch_array() expects parameter 1 to be mysqli_result, boolean given in E:\xampp\htdocs\crud\display.php on line 42............
    i m getting this error sir please help...please

    ReplyDelete
  6. source code file download please

    ReplyDelete
  7. all is well but when i click on update button and show the page of update then when i edit the data and click on submit button then it go to the insert page and cannot update the data

    ReplyDelete
  8. display code hase some error 47 line error

    ReplyDelete
  9. while i am inserting data it doesnot insert data in sql table even i put echo iin the

    php code it will not reflect please help

    ReplyDelete
  10. Very nice Thapa Ji...its really helpfull for me..

    ReplyDelete
  11. can you please add the search query with CRUD and add more details what your writing more detail for learning

    ReplyDelete
  12. Great article with excellent idea! Thank you for such a valuable article. I really appreciate for this great information.
    php software developers

    ReplyDelete
  13. This is a really too good post. This article gives truly quality and helpful information. I’m definitely going to look into it. Really very useful topic info is provided here. Thank you so much buddy and Keep up the good work.badbunnymerch

    ReplyDelete
  14. Thank you brother. I want to make such a database but I couldn't find any tutorials that you give us.

    ReplyDelete
  15. It's high in antioxidants and cleans pollutants out of your hair, so you won't be caught in a hair follicle drug test. You should use it in conjunction with Zydot Ultra Clean, which is recommended as a companion product on the company's website. Of these, the hair follicle drug test is the toughest to crack as this hair testing can detect the presence of THC metabolites in the body for the longest period — at least three months after last consumption. That’s because an average person’s hair grows about half an inch per month. Testclear’s Drug Test Kit is one of the most reliable home marijuana detox kits by a long shot. The test uses your urine to identify remnants of THC in your system. Visit: https://www.urineworld.com/

    ReplyDelete
  16. In this contemporary world, it has become responsible to get to each and everything with present day advances; subsequently, gaming peripherals are the best gaming gadgets which solace the gamers who love to play the best games with simple and open gadget to play their abilities. 먹튀사이트
    토토사이트

    ReplyDelete