Vue.js Fetch Data from MySQL Database using PHP

Submitted by nurhodelta_17 on Friday, December 8, 2017 - 21:27.

Getting Started

In this tutorial, I've used Bootstrap CDN, so you need internet connection for it to work.

Creating our Database

1. Open phpMyAdmin. 2. Click databases, create a database and name it as crud. 3. After creating a database, click the SQL and paste the below codes. See image below for detailed instruction.

CREATE TABLE `members` (
  `memid` INT(11) NOT NULL AUTO_INCREMENT,
  `firstname` VARCHAR(30) NOT NULL,
  `lastname` VARCHAR(30) NOT NULL,
PRIMARY KEY(`memid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Inserting Data into our Database

Next. we're gonna insert sample data into our database. These are the data that we are going to fetch in this tutorial. 1. Click database crud that we have created earlier. 2. Click SQL and paste the ff codes:

INSERT INTO `members` (`memid`, `firstname`, `lastname`) VALUES
(1, 'neovic', 'devierte'),
(2, 'gemalyn', 'cepe');

index.php

This is we're we show the data that we are fetching in the form of table.

<!DOCTYPE html>
<html>
<head>
        <title>Vue.js CRUD Series using PHP/MySQLi</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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"><span class="glyphicon glyphicon-plus"></span> Member</button>
                                        </h2>
                                </div>
                        </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>
        </div>
</div>
<script src="vue.js"></script>
<script src="axios.js"></script>
<script src="app.js"></script>
</body>
</html>

api.php

This is our PHP API code that contains data from our database.

<?php
 
$conn = new mysqli("localhost", "root", "", "crud");
 
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;
}
 
 
$conn->close();
 
header("Content-type: application/json");
echo json_encode($out);
die();
 
 
?>

app.js

Lastly, this is our Vue.js code that fetches data from our API.

var app = new Vue({
        el: '#members',
        data:{
 
                members: []
        },
 
        mounted: function(){
                this.getAllMembers();
        },
 
        methods:{
                getAllMembers: function(){
                        axios.get("api.php")
                                .then(function(response){
                                        //console.log(response);
                                        app.members = response.data.members;
                                });
                }
        }
});

That ends this tutorial. Stay for the continuation of this vue.js crud operation. Happy Coding :)