Update and Delete Data using VueJs in PHP

By CampCodes Administrator

Updated on:

update and delete data using vuejs

Tutorial: Update and Delete Data using VueJs in PHP with Source Code

Getting Started on How to Update and Delete Data using VueJs

This is a tutorial on how to update and delete data using Vuejs in PHP. 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 a Modals

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

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

<!-- Edit Modal -->
<div class="myModal" v-if="showEditModal">
    <div class="modalContainer">
        <div class="editHeader">
            <span class="headerTitle">Edit Member</span>
            <button class="closeEditBtn pull-right" @click="showEditModal = false">&times;</button>
        </div>
        <div class="modalBody">
            <div class="form-group">
                <label>Firstname:</label>
                <input type="text" class="form-control" v-model="clickMember.firstname">
            </div>
            <div class="form-group">
                <label>Lastname:</label>
                <input type="text" class="form-control" v-model="clickMember.lastname">
            </div>
        </div>
        <hr>
        <div class="modalFooter">
            <div class="footerBtn pull-right">
                <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>
            </div>
        </div>
    </div>
</div>
 
<!-- Delete Modal -->
<div class="myModal" v-if="showDeleteModal">
    <div class="modalContainer">
        <div class="deleteHeader">
            <span class="headerTitle">Delete Member</span>
            <button class="closeDelBtn pull-right" @click="showDeleteModal = false">&times;</button>
        </div>
        <div class="modalBody">
            <h5 class="text-center">Are you sure you want to Delete</h5>
            <h2 class="text-center">{{clickMember.firstname}} {{clickMember.lastname}}</h2>
        </div>
        <hr>
        <div class="modalFooter">
            <div class="footerBtn pull-right">
                <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>
            </div>
        </div>
    </div>
</div>

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

.editHeader{
    padding:10px;
    background: #4CAF50;
    color: #FFFFFF;
    height:50px;
    font-size:20px;
    padding-left:15px;
}
 
.deleteHeader{
    padding:10px;
    background: #f44336;
    color: #FFFFFF;
    height:50px;
    font-size:20px;
    padding-left:15px;
}
 
.closeEditBtn{
    background: #4CAF50;
    color: #FFFFFF;
    border:none;
}
 
.closeDelBtn{
    background: #f44336;
    color: #FFFFFF;
    border:none;
}

Updating a index.php

Next, we update our index to trigger our modals.

READ ALSO:   How to Highlight Matched Keywords in Search Result using PHP

<!DOCTYPE html>
<html>
<head>
    <title>Vue.js CRUD Operation using PHP/MySQLi</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
    <h1 class="page-header text-center">Vue.js CRUD Operation with PHP/MySQLi</h1>
    <div id="members">
        <div class="col-md-8 col-md-offset-2">
            <div class="row">
                <div class="col-md-12">
                    <h2>Member List
                    <button class="btn btn-primary pull-right" @click="showAddModal = true"><span class="glyphicon glyphicon-plus"></span> Member</button>
                    </h2>
                </div>
            </div>
 
            <div class="alert alert-danger text-center" v-if="errorMessage">
                <button type="button" class="close" @click="clearMessage();"><span aria-hidden="true">&times;</span></button>
                <span class="glyphicon glyphicon-alert"></span> {{ errorMessage }}
            </div>
 
            <div class="alert alert-success text-center" v-if="successMessage">
                <button type="button" class="close" @click="clearMessage();"><span aria-hidden="true">&times;</span></button>
                <span class="glyphicon glyphicon-ok"></span> {{ successMessage }}
            </div>
 
            <table class="table table-bordered table-striped">
                <thead>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Action</th>
                </thead>
                <tbody>
                    <tr v-for="member in members">
                        <td>{{ member.firstname }}</td>
                        <td>{{ member.lastname }}</td>
                        <td>
                            <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>
 
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
 
        <?php include('modal.php'); ?>
    </div>
</div>
<script src="vue.js"></script>
<script src="axios.js"></script>
<script src="app.js"></script>
</body>
</html>

Adding Update and Delete Code in a API

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

if($crud == 'update'){
 
    $memid = $_POST['memid'];
    $firstname = $_POST['firstname'];
    $lastname = $_POST['lastname'];
 
    $sql = "update members set firstname='$firstname', lastname='$lastname' where memid='$memid'";
    $query = $conn->query($sql);
 
    if($query){
        $out['message'] = "Member Updated Successfully";
    }
    else{
        $out['error'] = true;
        $out['message'] = "Could not update Member";
    }
 
}
 
if($crud == 'delete'){
 
    $memid = $_POST['memid'];
 
    $sql = "delete from members where memid='$memid'";
    $query = $conn->query($sql);
 
    if($query){
        $out['message'] = "Member Deleted Successfully";
    }
    else{
        $out['error'] = true;
        $out['message'] = "Could not delete Member";
    }
 
}

Updating a Vue Code

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

var app = new Vue({
    el: '#members',
    data:{
        showAddModal: false,
        showEditModal: false,
        showDeleteModal: false,
        errorMessage: "",
        successMessage: "",
        members: [],
        newMember: {firstname: '', lastname: ''},
        clickMember: {}
    },
 
    mounted: function(){
        this.getAllMembers();
    },
 
    methods:{
        getAllMembers: function(){
            axios.get('api.php')
                .then(function(response){
                    //console.log(response);
                    if(response.data.error){
                        app.errorMessage = response.data.message;
                    }
                    else{
                        app.members = response.data.members;
                    }
                });
        },
 
        saveMember: function(){
            //console.log(app.newMember);
            var memForm = app.toFormData(app.newMember);
            axios.post('api.php?crud=create', memForm)
                .then(function(response){
                    //console.log(response);
                    app.newMember = {firstname: '', lastname:''};
                    if(response.data.error){
                        app.errorMessage = response.data.message;
                    }
                    else{
                        app.successMessage = response.data.message
                        app.getAllMembers();
                    }
                });
        },
 
        updateMember(){
            var memForm = app.toFormData(app.clickMember);
            axios.post('api.php?crud=update', memForm)
                .then(function(response){
                    //console.log(response);
                    app.clickMember = {};
                    if(response.data.error){
                        app.errorMessage = response.data.message;
                    }
                    else{
                        app.successMessage = response.data.message
                        app.getAllMembers();
                    }
                });
        },
 
        deleteMember(){
            var memForm = app.toFormData(app.clickMember);
            axios.post('api.php?crud=delete', memForm)
                .then(function(response){
                    //console.log(response);
                    app.clickMember = {};
                    if(response.data.error){
                        app.errorMessage = response.data.message;
                    }
                    else{
                        app.successMessage = response.data.message
                        app.getAllMembers();
                    }
                });
        },
 
        selectMember(member){
            app.clickMember = member;
        },
 
        toFormData: function(obj){
            var form_data = new FormData();
            for(var key in obj){
                form_data.append(key, obj[key]);
            }
            return form_data;
        },
 
        clearMessage: function(){
            app.errorMessage = '';
            app.successMessage = '';
        }
 
    }
});
update and delete data using vuejs
update and delete data using vuejs

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

READ ALSO:   Simple Login Using PDO in PHP MySQL

That ends this tutorial series. Happy Coding!

Download Here

Leave a Comment