Fetch Data Vue.js from MySQL Database in PHP

May 31, 2020
PHP
vue.js read data

Getting Started

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

Creating a 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 a Database

Next, We’re going to 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!

Download Here
Facebook Comments
https://www.campcodes.com/

This is a free education portal. You can use every source code in your project without asking permission to the author. Share our website to everyone to make our community of programmers grow more.

Leave a Reply

Your email address will not be published.