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

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. AddResult Add To edit data in the database. EditResult Edit To delete data in the database. DeleteResult 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.

Add new comment