Vue.js Update and Delete Data using PHP

Submitted by: 
Language: 
Visitors have accessed this post 5331 times.

Getting Started

In my previous tutorial, Vue.js Insert Data into MySQL Database using PHP, we have inserted new data into our database. As a continuation, we are then going to update and delete data in our database with the help of axios.

Creating our Modals

First, we are going to create the modals for our update and delete.

1. In our modal.php, add the ff:

  1. <!-- Edit Modal -->
  2. <div class="myModal" v-if="showEditModal">
  3. <div class="modalContainer">
  4. <div class="editHeader">
  5. <span class="headerTitle">Edit Member</span>
  6. <button class="closeEditBtn pull-right" @click="showEditModal = false">&times;</button>
  7. </div>
  8. <div class="modalBody">
  9. <div class="form-group">
  10. <label>Firstname:</label>
  11. <input type="text" class="form-control" v-model="clickMember.firstname">
  12. </div>
  13. <div class="form-group">
  14. <label>Lastname:</label>
  15. <input type="text" class="form-control" v-model="clickMember.lastname">
  16. </div>
  17. </div>
  18. <hr>
  19. <div class="modalFooter">
  20. <div class="footerBtn pull-right">
  21. <button class="btn btn-default" @click="showEditModal = false"><span class="glyphicon glyphicon-remove"></span> Cancel</button> <button class="btn btn-success" @click="showEditModal = false; updateMember();"><span class="glyphicon glyphicon-check"></span> Save</button>
  22. </div>
  23. </div>
  24. </div>
  25. </div>
  26.  
  27. <!-- Delete Modal -->
  28. <div class="myModal" v-if="showDeleteModal">
  29. <div class="modalContainer">
  30. <div class="deleteHeader">
  31. <span class="headerTitle">Delete Member</span>
  32. <button class="closeDelBtn pull-right" @click="showDeleteModal = false">&times;</button>
  33. </div>
  34. <div class="modalBody">
  35. <h5 class="text-center">Are you sure you want to Delete</h5>
  36. <h2 class="text-center">{{clickMember.firstname}} {{clickMember.lastname}}</h2>
  37. </div>
  38. <hr>
  39. <div class="modalFooter">
  40. <div class="footerBtn pull-right">
  41. <button class="btn btn-default" @click="showDeleteModal = false"><span class="glyphicon glyphicon-remove"></span> Cancel</button> <button class="btn btn-danger" @click="showDeleteModal = false; deleteMember(); "><span class="glyphicon glyphicon-trash"></span> Yes</button>
  42. </div>
  43. </div>
  44. </div>
  45. </div>

2. In our style.css, add the ff styles for our modals.

  1. .editHeader{
  2. padding:10px;
  3. background: #4CAF50;
  4. color: #FFFFFF;
  5. height:50px;
  6. font-size:20px;
  7. padding-left:15px;
  8. }
  9.  
  10. .deleteHeader{
  11. padding:10px;
  12. background: #f44336;
  13. color: #FFFFFF;
  14. height:50px;
  15. font-size:20px;
  16. padding-left:15px;
  17. }
  18.  
  19. .closeEditBtn{
  20. background: #4CAF50;
  21. color: #FFFFFF;
  22. border:none;
  23. }
  24.  
  25. .closeDelBtn{
  26. background: #f44336;
  27. color: #FFFFFF;
  28. border:none;
  29. }

Updating our index.php

Next, we update our index to trigger our modals.

  1. <!DOCTYPE html>
  2. <title>Vue.js CRUD Operation using PHP/MySQLi</title>
  3. <link rel="stylesheet" href="<a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"" rel="nofollow">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</a> />
  4. <link rel="stylesheet" type="text/css" href="style.css">
  5. </head>
  6. <div class="container">
  7. <h1 class="page-header text-center">Vue.js CRUD Operation with PHP/MySQLi</h1>
  8. <div id="members">
  9. <div class="col-md-8 col-md-offset-2">
  10. <div class="row">
  11. <div class="col-md-12">
  12. <h2>Member List
  13. <button class="btn btn-primary pull-right" @click="showAddModal = true"><span class="glyphicon glyphicon-plus"></span> Member</button>
  14. </h2>
  15. </div>
  16. </div>
  17.  
  18. <div class="alert alert-danger text-center" v-if="errorMessage">
  19. <button type="button" class="close" @click="clearMessage();"><span aria-hidden="true">&times;</span></button>
  20. <span class="glyphicon glyphicon-alert"></span> {{ errorMessage }}
  21. </div>
  22.  
  23. <div class="alert alert-success text-center" v-if="successMessage">
  24. <button type="button" class="close" @click="clearMessage();"><span aria-hidden="true">&times;</span></button>
  25. <span class="glyphicon glyphicon-ok"></span> {{ successMessage }}
  26. </div>
  27.  
  28. <table class="table table-bordered table-striped">
  29. <th>Firstname</th>
  30. <th>Lastname</th>
  31. <th>Action</th>
  32. </thead>
  33. <tr v-for="member in members">
  34. <td>{{ member.firstname }}</td>
  35. <td>{{ member.lastname }}</td>
  36. <td>
  37. <button class="btn btn-success" @click="showEditModal = true; selectMember(member);"><span class="glyphicon glyphicon-edit"></span> Edit</button> <button class="btn btn-danger" @click="showDeleteModal = true; selectMember(member);"><span class="glyphicon glyphicon-trash"></span> Delete</button>
  38.  
  39. </td>
  40. </tr>
  41. </tbody>
  42. </table>
  43. </div>
  44.  
  45. <?php include('modal.php'); ?>
  46. </div>
  47. </div>
  48. <script src="vue.js"></script>
  49. <script src="axios.js"></script>
  50. <script src="app.js"></script>
  51. </body>
  52. </html>

Adding Update and Delete Code in our API

In our api.php, add the ff update and delete code:

  1. if($crud == 'update'){
  2.  
  3. $memid = $_POST['memid'];
  4. $firstname = $_POST['firstname'];
  5. $lastname = $_POST['lastname'];
  6.  
  7. $sql = "update members set firstname='$firstname', lastname='$lastname' where memid='$memid'";
  8. $query = $conn->query($sql);
  9.  
  10. if($query){
  11. $out['message'] = "Member Updated Successfully";
  12. }
  13. else{
  14. $out['error'] = true;
  15. $out['message'] = "Could not update Member";
  16. }
  17.  
  18. }
  19.  
  20. if($crud == 'delete'){
  21.  
  22. $memid = $_POST['memid'];
  23.  
  24. $sql = "delete from members where memid='$memid'";
  25. $query = $conn->query($sql);
  26.  
  27. if($query){
  28. $out['message'] = "Member Deleted Successfully";
  29. }
  30. else{
  31. $out['error'] = true;
  32. $out['message'] = "Could not delete Member";
  33. }
  34.  
  35. }

Updating our Vue Code

Lastly, we update our app.js with the ff:

  1. var app = new Vue({
  2. el: '#members',
  3. data:{
  4. showAddModal: false,
  5. showEditModal: false,
  6. showDeleteModal: false,
  7. errorMessage: "",
  8. successMessage: "",
  9. members: [],
  10. newMember: {firstname: '', lastname: ''},
  11. clickMember: {}
  12. },
  13.  
  14. mounted: function(){
  15. this.getAllMembers();
  16. },
  17.  
  18. methods:{
  19. getAllMembers: function(){
  20. axios.get('api.php')
  21. .then(function(response){
  22. //console.log(response);
  23. if(response.data.error){
  24. app.errorMessage = response.data.message;
  25. }
  26. else{
  27. app.members = response.data.members;
  28. }
  29. });
  30. },
  31.  
  32. saveMember: function(){
  33. //console.log(app.newMember);
  34. var memForm = app.toFormData(app.newMember);
  35. axios.post('api.php?crud=create', memForm)
  36. .then(function(response){
  37. //console.log(response);
  38. app.newMember = {firstname: '', lastname:''};
  39. if(response.data.error){
  40. app.errorMessage = response.data.message;
  41. }
  42. else{
  43. app.successMessage = response.data.message
  44. app.getAllMembers();
  45. }
  46. });
  47. },
  48.  
  49. updateMember(){
  50. var memForm = app.toFormData(app.clickMember);
  51. axios.post('api.php?crud=update', memForm)
  52. .then(function(response){
  53. //console.log(response);
  54. app.clickMember = {};
  55. if(response.data.error){
  56. app.errorMessage = response.data.message;
  57. }
  58. else{
  59. app.successMessage = response.data.message
  60. app.getAllMembers();
  61. }
  62. });
  63. },
  64.  
  65. deleteMember(){
  66. var memForm = app.toFormData(app.clickMember);
  67. axios.post('api.php?crud=delete', memForm)
  68. .then(function(response){
  69. //console.log(response);
  70. app.clickMember = {};
  71. if(response.data.error){
  72. app.errorMessage = response.data.message;
  73. }
  74. else{
  75. app.successMessage = response.data.message
  76. app.getAllMembers();
  77. }
  78. });
  79. },
  80.  
  81. selectMember(member){
  82. app.clickMember = member;
  83. },
  84.  
  85. toFormData: function(obj){
  86. var form_data = new FormData();
  87. for(var key in obj){
  88. form_data.append(key, obj[key]);
  89. }
  90. return form_data;
  91. },
  92.  
  93. clearMessage: function(){
  94. app.errorMessage = '';
  95. app.successMessage = '';
  96. }
  97.  
  98. }
  99. });

You should now be able to add, edit and delete using vue.js.

That ends this tutorial series. Happy Coding :)


Comments

once combined,the edit as well as the delete modals don't get trigered ifpressed.the create function seem to work just fine though.

Hello, first of all thanks for the tutorials, great content here.. i've done it all and the + Member is working great but the EDIT & DELETE don't work..

I've done the files and after i've downloaded yours...and they are no working as well.

Ricardo Manuel Pinto Pereira

I'm learning vue.js with your codes... but I got a question, how did you get the id of the member? $_POST['memid']

Where is 'memid' in your code?

It's from clickMember object or app.clickMember in controller sir that you send when you did your ajax update or delete. clickMember object is populated when you click the edit/delete button in the table.

Hey, thanks for this tutorial series about vue and php/mysql, i am trying to learn vue and with these posts I understood how it works a little.

Thank you from Argentina

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.