Fetch Data Using Vue.js From MySQL Database In PHP | Free Source Code

Fetch Data using Vue.js from MySQL Database in PHP

May 31, 2020
PHP
How to Fetch Data using Vue.js from MySQL Database in PHP

Tutorial: How to Fetch Data using Vue.js from MySQL Database in PHP with Source Code

Getting Started on How to Fetch Data using Vue.js from MySQL Database in PHP

This tutorial will show you How to Fetch Data using Vue.js from MySQL Database in PHP. 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!

Screenshot

How to Fetch Data using Vue.js from MySQL Database in PHP

How to Fetch Data using Vue.js from MySQL Database in PHP


Related Tutorials: Update and Delete Data using VueJs in PHP, Insert Data into MySQL Database using Vuejs in PHP, User Registration using VueJs in PHP MySQL

Download Here
Facebook Comments

Leave a Reply

Your email address will not be published.