Vue.js Insert Data into MySQL Database using PHP

Submitted by nurhodelta_17 on Saturday, December 9, 2017 - 17:34.

Getting Started

This is the continuation of my tutorial, Vue.js Fetch Data from MySQL Database using PHP, wherein this time we are going to insert data into our database. For database structure, please visit the previous tutorial.

Creating our Add Modal

First we're are going to create our add modal as well as our custom css. 1. Create a new file and name it as modal.php and paste the ff codes:

<!-- Add Modal -->
<div class="myModal" v-if="showAddModal">
        <div class="modalContainer">
                <div class="modalHeader">
                        <span class="headerTitle">Add New Member</span>
                        <button class="closeBtn pull-right" @click="showAddModal = false">&times;</button>
                </div>
                <div class="modalBody">
                        <div class="form-group">
                                <label>Firstname:</label>
                                <input type="text" class="form-control" v-model="newMember.firstname">
                        </div>
                        <div class="form-group">
                                <label>Lastname:</label>
                                <input type="text" class="form-control" v-model="newMember.lastname">
                        </div>
                </div>
                <hr>
                <div class="modalFooter">
                        <div class="footerBtn pull-right">
                                <button class="btn btn-default" @click="showAddModal = false"><span class="glyphicon glyphicon-remove"></span> Cancel</button> <button class="btn btn-primary" @click="showAddModal = false; saveMember();"><span class="glyphicon glyphicon-floppy-disk"></span> Save</button>
                        </div>
                </div>
        </div>
</div>

2. Create a new file and name it as style.css and paste the ff. styles:

.myModal{
        position:fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background: rgba(0, 0, 0, 0.4);
}
 
.modalContainer{
        width: 555px;
        background: #FFFFFF;
        margin:auto;
        margin-top:50px;
}
 
.modalHeader{
        padding:10px;
        background: #008CBA;
        color: #FFFFFF;
        height:50px;
        font-size:20px;
        padding-left:15px;
}
 
 
.modalBody{
        padding:40px;
}
 
.modalFooter{
        height:36px;
}
 
.footerBtn{
        margin-right:10px;
        margin-top:-9px;
}
 
.closeBtn{
        background: #008CBA;
        color: #FFFFFF;
        border:none;
}

Updating index.php

Next, we update our index to accomodate our modal and add error or success div.

<!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"><span class="glyphicon glyphicon-edit"></span> Edit</button> <button class="btn btn-danger"><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>

Setting up our Add API

In our api.php, add the following line after the if statement for our read.

if($crud == 'create'){
 
        $firstname = $_POST['firstname'];
        $lastname = $_POST['lastname'];
 
        $sql = "insert into members (firstname, lastname) values ('$firstname', '$lastname')";
        $query = $conn->query($sql);
 
        if($query){
                $out['message'] = "Member Added Successfully";
        }
        else{
                $out['error'] = true;
                $out['message'] = "Could not add Member";
        }
        
}

Updating our Vue Code

Lastly, we update our app.js which contains our vue code with the ff:

var app = new Vue({
        el: '#members',
        data:{
                showAddModal: false,
                errorMessage: "",
                successMessage: "",
                members: [],
                newMember: {firstname: '', lastname: ''}
        },
 
        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();
                                        }
                                });
                },
 
                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 = '';
                }
 
        }
});

You should now be able to add new row using vue.js That ends this tutorial. Happy Coding :)

Add new comment

1046 views