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>
on
Labels: , , , ,

16 comments:

  1. OMGPhSeptember 18, 2018 at 9:09 PM

    hi how can you show the one you edit?

    value=" ">

    value=" ">

    but it doesn'y work. please help.

    ReplyDelete
  2. Eang ChornNovember 14, 2018 at 3:49 PM

    can you give Source Code for me brother

    ReplyDelete
  3. UnknownJanuary 3, 2019 at 11:37 AM

    very nice

    ReplyDelete
  4. UnknownJanuary 9, 2019 at 10:14 PM

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

    ReplyDelete
  5. big bishJanuary 31, 2019 at 9:10 AM

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

    ReplyDelete
  6. UnknownMarch 6, 2019 at 12:37 AM

    I need this in ZIP or rar

    ReplyDelete
  7. aravindSeptember 17, 2019 at 6:54 PM

    wothless

    ReplyDelete
  8. UnknownSeptember 24, 2019 at 9:06 AM


    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
  9. ranjansrOctober 17, 2019 at 12:16 PM

    source code file download please

    ReplyDelete
  10. TejOctober 29, 2019 at 8:34 AM

    Very useful for me..

    ReplyDelete
  11. malik ijazNovember 2, 2019 at 12:11 AM

    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
  12. UnknownDecember 22, 2019 at 6:59 AM

    display code hase some error 47 line error

    ReplyDelete
  13. TechnologysApril 23, 2020 at 4:10 AM

    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
  14. UnknownMay 13, 2020 at 12:00 AM

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

    ReplyDelete
  15. UnknownJuly 25, 2020 at 7:03 AM

    tnx ma bro

    ReplyDelete
  16. UnknownDecember 25, 2020 at 11:35 PM

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

    ReplyDelete

Subscribe to: Post Comments (Atom)
© ThapaTechnical 2018. By SoraTemplates | DSTB By MyBloggerThemes | FreeBloggerTemplates