How To Add, Edit, Delete Records In Database Using PHP

Submitted by alpha_luna on Tuesday, April 19, 2016 - 14:23.
In this tutorial, we are going to learn on How To Add, Edit, Delete Records In Database Using PHP. We can learn to add, edit, delete records in the database using the PHP Language. This is the basic source code, and this is for everyone, especially for all the beginners using PHP Language. Form Field - HTML This HTML code for the "Add Message".
  1. <div class="form_style">
  2. <div id="comment-list-box">
  3. <?php
  4. if(!empty($comments)) {
  5. foreach($comments as $k=>$v) {
  6. ?>
  7. <div class="message-box" id="message_<?php echo $comments[$k]["id"];?>">
  8. <div>
  9. <button class="btnEditAction" name="edit" onClick="showEditBox(this,<?php echo $comments[$k]["id"]; ?>)">Edit</button>
  10. <button class="btnDeleteAction" name="delete" onClick="callCrudAction('delete',<?php echo $comments[$k]["id"]; ?>)">Delete</button>
  11. </div>
  12. <div class="message-content"><?php echo $comments[$k]["message"]; ?></div>
  13. </div>
  14. <?php
  15. }
  16. } ?>
  17. </div>
  18.  
  19. <div id="frmAdd"><textarea name="txtmessage" autofocus="autofocus" class="message_style" id="txtmessage"></textarea>
  20. <p><button id="btnAddAction" class="btnAdd" name="submit" onClick="callCrudAction('add','')">Add</button></p>
  21. </div>
  22. <img src="LoaderIcon.gif" id="loaderIcon" style="display:none" />
  23. </div>
jQuery Script This script function for the adding, editing and deleting data in the database.
  1. <script src="js/code_js.js" type="text/javascript"></script>
  2. <script>
  3. function showEditBox(editobj,id) {
  4.         $('#frmAdd').hide();
  5.         $(editobj).prop('disabled','true');
  6.         var currentMessage = $("#message_" + id + " .message-content").html();
  7.         var editMarkUp = '<textarea rows="5" cols="80" class="message_style_1" id="txtmessage_'+id+'">'+currentMessage+'</textarea><button name="ok" class="btnSave" onClick="callCrudAction(\'edit\','+id+')">Save</button><button name="cancel" class="btnCancel" onClick="cancelEdit(\''+currentMessage+'\','+id+')">Cancel</button>';
  8.         $("#message_" + id + " .message-content").html(editMarkUp);
  9. }
  10. function cancelEdit(message,id) {
  11.         $("#message_" + id + " .message-content").html(message);
  12.         $('#frmAdd').show();
  13. }
  14. function callCrudAction(action,id) {
  15.         $("#loaderIcon").show();
  16.         var queryString;
  17.         switch(action) {
  18.                 case "add":
  19.                         queryString = 'action='+action+'&txtmessage='+ $("#txtmessage").val();
  20.                 break;
  21.                 case "edit":
  22.                         queryString = 'action='+action+'&message_id='+ id + '&txtmessage='+ $("#txtmessage_"+id).val();
  23.                 break;
  24.                 case "delete":
  25.                         queryString = 'action='+action+'&message_id='+ id;
  26.                 break;
  27.         }        
  28.         jQuery.ajax({
  29.         url: "action.php",
  30.         data:queryString,
  31.         type: "POST",
  32.         success:function(data){
  33.                 switch(action) {
  34.                         case "add":
  35.                                 $("#comment-list-box").append(data);
  36.                         break;
  37.                         case "edit":
  38.                                 $("#message_" + id + " .message-content").html(data);
  39.                                 $('#frmAdd').show();
  40.                                 $("#message_"+id+" .btnEditAction").prop('disabled','');       
  41.                         break;
  42.                         case "delete":
  43.                                 $('#message_'+id).fadeOut();
  44.                         break;
  45.                 }
  46.                 $("#txtmessage").val('');
  47.                 $("#loaderIcon").hide();
  48.         },
  49.         error:function (){}
  50.         });
  51. }
  52. </script>
And, this is the style.
  1. <style type="text/css">
  2. body {
  3.         width:40%;
  4.         margin:auto;
  5. }
  6. .message-box {
  7.         margin-top:20px;
  8.         margin-bottom:20px;
  9.         border:red 1px solid;
  10.         border-radius:8px;
  11.         background:white;
  12.         padding:10px;
  13. }
  14. .btnEditAction {
  15.         background-color:white;
  16.         border:green 1px solid;
  17.         padding:2px 10px;
  18.         color:green;
  19.     font-size: 18px;
  20.         cursor:pointer;
  21. }
  22. .btnDeleteAction {
  23.         background-color:white;
  24.         border:red 1px solid;
  25.         padding:2px 10px;
  26.         color:red;
  27.     font-size: 18px;
  28.         margin-bottom:15px;
  29.         cursor:pointer;
  30. }
  31. #btnAddAction {
  32.         background-color:white;
  33.         border:skyblue 1px solid;
  34.     font-size: 18px;
  35.         color:skyblue;
  36.         cursor:pointer;
  37. }
  38. .message_style {
  39.         width: 506px;
  40.     background: azure;
  41.     border: blue 1px solid;
  42.     border-radius: 4px;
  43.     color: blue;
  44.     font-size: 18px;
  45.         text-indent:5px;
  46.         cursor:pointer;
  47. }
  48. .message_style_1 {
  49.         width: 494px;
  50.     background: azure;
  51.     border: blue 1px solid;
  52.     border-radius: 4px;
  53.     color: blue;
  54.     font-size: 18px;
  55.         cursor:pointer;
  56. }
  57. .btnSave {
  58.         margin-top: 10px;
  59.     margin-right: 20px;
  60.     background: green;
  61.     color: white;
  62.     border: green 1px solid;
  63.     font-size: large;
  64.         cursor:pointer;
  65. }
  66. .btnCancel {
  67.         margin-top: 10px;
  68.     margin-right: 20px;
  69.     background: red;
  70.     color: white;
  71.     border: red 1px solid;
  72.     font-size: large;
  73.         cursor:pointer;
  74. }
  75. </style>
This is the output: To add data to the database. Add Result Add To edit data in the database. Edit Result Edit To delete data in the database. Delete Result Delete So what can you say about this work? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you very much.
Tags
add / edit / delete record
Add Record in the Database
add edit delete using php
add edit delete
Add/Edit/Delete
add udpate delete record

Add new comment

About text formats
  • 351 views