Insert Data into MySQL Database using Vuejs in PHP

January 10, 2021
PHP
crud vuejs php

Tutorial: Insert Data into MySQL Database using Vuejs in PHP with Source Code

Getting Started on How to Insert Data into MySQL Database using Vuejs

Insert Data into MySQL Database using Vuejs in PHP is getting all the data inputted in the form to be added to MySQL Database. 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 an 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 a 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 = '';
        }
 
    }
});

Insert Data into MySQL Database using Vuejs

You should now be able to add new row using vue.js.

That ends this tutorial. Happy Coding!

Download Here

 

Facebook Comments

Leave a Reply

Your email address will not be published.