article

Saturday, November 13, 2021

Vue.js Axios CRUD (Create, Read, Update and Delete) using PHP MySQLi

Vue.js Axios CRUD (Create, Read, Update and Delete) using PHP MySQLi

Download or Include 

axios
https://github.com/axios/axios

Using jsDelivr CDN: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

VueJS 
https://vuejs.org/v2/guide/installation.html

CDN : https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js

CREATE TABLE `members` (
  `memid` int(11) NOT NULL,
  `firstname` varchar(30) NOT NULL,
  `lastname` varchar(30) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `members` (`memid`, `firstname`, `lastname`) VALUES
(2, 'Airi', 'Satou'),
(3, 'Angelica', 'Ramos'),
(4, 'Ashton', 'Cox'),
(5, 'Bradley', 'Greer'),
(6, 'Brenden', 'Wagner');

ALTER TABLE `members`
  ADD PRIMARY KEY (`memid`);

ALTER TABLE `members`
  MODIFY `memid` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;

index.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
//index.php
<!DOCTYPE html>
<html>
<head>
    <title>Vue.js Axios CRUD (Create, Read, Update and Delete) 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 Axios CRUD (Create, Read, Update and Delete) using PHP MySQLi</h1>
    <div id="vuejscrudmembers">
        <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">×</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">×</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="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
//app.js
var app = new Vue({
    el: '#vuejscrudmembers',
    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 = '';
        }
 
    }
});
api.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
//api.php
<?php
$conn = new mysqli("localhost", "root", "", "testingdb");
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
 
$out = array('error' => false);
 
$crud = 'read';
 
if(isset($_GET['crud'])){
    $crud = $_GET['crud'];
}
 
 
if($crud == 'read'){
    $sql = "select * from members";
    $query = $conn->query($sql);
    $members = array();
 
    while($row = $query->fetch_array()){
        array_push($members, $row);
    }
 
    $out['members'] = $members;
}
 
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";
    }
     
}
 
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";
    }
     
}
 
 
$conn->close();
 
header("Content-type: application/json");
echo json_encode($out);
die();
?>
modal.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
//modal.php
<!-- 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">×</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>
 
<!-- 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">×</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">×</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>
style.css
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
//style.css
.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;
}
 
.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;
}
 
.modalBody{
    padding:40px;
}
 
.modalFooter{
    height:36px;
}
 
.footerBtn{
    margin-right:10px;
    margin-top:-9px;
}
 
.closeBtn{
    background: #008CBA;
    color: #FFFFFF;
    border:none;
}
 
.closeEditBtn{
    background: #4CAF50;
    color: #FFFFFF;
    border:none;
}
 
.closeDelBtn{
    background: #f44336;
    color: #FFFFFF;
    border:none;
}

Posted by ednalan at 5:54 PM . Under .

Related Post