article

Friday, February 11, 2022

Vue.js PHP Mysql Submit Form Data with Alert Message

Vue.js PHP Mysql Submit Form Data with Alert Message

vuejs
https://v2.vuejs.org/v2/guide/installation.html
CDN : https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js

Axios 
CDN : https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
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
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
//index.php
<!DOCTYPE html>
<html>
<head>
    <title>Vue.js PHP Mysql Submit Form Data with Alert Message</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <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>
</head>
<body>
<div id="alert">
 
    <div class="topcorner alert_danger" v-if="isError">
        <span class="closebutton" @click="clearMessage();">×</span>
        <span class="glyphicon glyphicon-alert"></span> {{ responseMessage }}
    </div>
    <div class="topcorner alert_success" v-if="isSuccess">
        <span class="closebutton" @click="clearMessage();">×</span>
        <span class="glyphicon glyphicon-check-square-o"></span> {{ responseMessage }}
    </div>
     
    <div class="container">
        <h1 class="page-header text-center">Vue.js PHP Mysql Submit Form Data with Alert Message</h1>
        <div class="col-md-4">
            <div class="form-group">
                <label>First Name:</label>
                <input type="text" class="form-control" v-model="newMember.firstname" v-on:keyup="keymonitor">
            </div>
            <div class="form-group">
                <label>Last Name:</label>
                <input type="text" class="form-control" v-model="newMember.lastname" v-on:keyup="keymonitor">
            </div>
            <button class="btn btn-primary" @click="insertMember();"><span class="glyphicon glyphicon-floppy-disk"></span> Save</button> <button class="btn btn-danger" @click="clearForm();"><span class="glyphicon glyphicon-refresh"></span> Clear</button>
        </div>
        <div class="col-md-8">
            <table class="table table-bordered table-striped">
                <thead>
                    <th>Member ID</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                </thead>
                <tbody>
                    <tr v-for="member in members">
                        <td>{{ member.id }}</td>
                        <td>{{ member.firstname }}</td>
                        <td>{{ member.lastname }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script src="app.js"></script>
<style type="text/css">
        .topcorner{
            position:absolute;
            top:5px;
            right:5px;
        }
        .alert_danger {
            padding: 15px;
            background-color: #f44336;
            color: white;
        }
 
        .alert_success {
            padding: 15px;
            background-color: #4CAF50;
            color: white;
        }
 
        .closebutton {
            margin-left: 15px;
            color: white;
            font-weight: bold;
            float: right;
            font-size: 22px;
            line-height: 20px;
            cursor: pointer;
            transition: 0.3s;
        }
 
        .closebutton:hover {
            color: black;
        }
</style>
</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
//app.js
var app = new Vue({
    el: '#alert',
    data:{
        newMember: {firstname: '', lastname: ''},
        alertMessage: false,
        isSuccess: false,
        isError: false,
        responseMessage: "",
        members: []
    },
 
    mounted: function(){
        this.fetchMembers();
    },
 
    methods:{
        keymonitor: function(event) {
            if(event.key == "Enter"){
                app.insertMember();
            }
        },
 
        fetchMembers: function(){
            axios.post('action.php')
                .then(function(response){
                    app.members = response.data.members;
                });
        },
 
        insertMember: function(){
            var memberForm = app.toFormData(app.newMember);
            axios.post('action.php?action=add', memberForm)
                .then(function(response){
                    console.log(response);
                    if(response.data.error){
                        app.alertMessage = true;
                        app.isError = true;
                        app.isSuccess = false;
                        app.responseMessage = response.data.message;
                        setTimeout(function(){
                            app.clearMessage();
                        },3000);
                    }
                    else{
                        app.isSuccess = true;
                        app.isError = false;
                        app.alertMessage = true;
                        app.responseMessage = response.data.message;
                        app.newMember = {firstname: '', lastname:''};
                        app.fetchMembers();
                        setTimeout(function(){
                            app.clearMessage();
                        },3000);
                    }
                });
        },
 
        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.isError = false;
            app.isSuccess = false;
        },
 
        clearForm: function(){
            app.newMember=app.newMember = {firstname: '', lastname:''};
        }
 
 
 
    }
});
action.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
//action.php
<?php
$conn = new mysqli("localhost", "root", "", "testingdb");
 
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
 
$out = array('error' => false);
 
$action="show";
 
if(isset($_GET['action'])){
    $action=$_GET['action'];
}
 
if($action=='show'){
    $sql = "select * from members";
    $query = $conn->query($sql);
    $members = array();
 
    while($row = $query->fetch_array()){
        array_push($members, $row);
    }
 
    $out['members'] = $members;
}
 
if($action=='add'){
    $firstname=$_POST['firstname'];
    $lastname=$_POST['lastname'];
 
    if($firstname==''){
        $out['error']=true;
        $out['message']='Add Member Failed. Username Empty.';
    }
    elseif($lastname==''){
        $out['error']=true;
        $out['message']='Add Member Failed. lastname Empty.';
    }
    else{
        $sql="insert into members ( firstname, lastname) values ('$firstname', '$lastname')";
        $query=$conn->query($sql);
 
        if($query){
            $out['message']='Member Successfully Added';
        }
        else{
            $out['error']=true;
            $out['message']='Error in Adding Occured';
        }
         
    }
}
 
 
 
 
$conn->close();
 
header("Content-type: application/json");
echo json_encode($out);
die();
 
?>

Posted by ednalan at 10:20 PM . Under .

Related Post