Contoh aplikasi CRUD Vue dengan Axios API PHP dan MySQL

Oleh Indrawati Oktober 22, 2021 Posting Komentar

Langkah#1 Membuat Database

buatlah sebuah database dengan nama vue_db dan buatlah sebuah tabel dengan nama produk menggunakan script berikut :


CREATE TABLE penjualan (
  id int(6) unsigned NOT NULL AUTO_INCREMENT,
  kode varchar(30) DEFAULT NULL,
  nama varchar(250) DEFAULT NULL,
  harga double DEFAULT NULL,
  jumlah int(5) DEFAULT NULL,
  subtotal double DEFAULT NULL,
  PRIMARY KEY (id)
);

Langkah#2 Membuat API

buatlah sebuah project folder untuk menyimpan project yang akan kita buat pada folder htdocs (jika anda menggunakan xampp) dengan nama penjualan, pada folder penjualan kemudian buatlah dua buah folder dengan nama :

server, digunakan sebagai aplikasi backend yang akan dibuat menggunakan php
client, digunakan sebagai aplikasi frontend yang akan dibuat menggunakan Vue.

selanjutnya kita akan membuat api yang berisi beberapa request untuk melakukan CRUD (Create,Read,Update dan Delete) data. buatlah sebuah file baru pada folder api dengan nama api.php, kemudian masukan coding berikut :

<?php

// Content Type JSON
header("Content-type: application/json");

// Database connection
$conn = new mysqli("localhost", "root", "toor", "vue_db");
if ($conn->connect_error) {
    die("Koneksi Database gagal.");
}
$res = array('error' => false);

// Membaca data dari database (READ)
$action = 'read';

if (isset($_GET['action'])) {
    $action = $_GET['action'];
}

if ($action == 'read') {
    $result = $conn->query("SELECT * FROM penjualan");
    $penjualan = array();

    while ($row = $result->fetch_assoc()) {
        array_push($penjualan, $row);
    }
    $res['penjualan'] = $penjualan;
}

// Menyimpan data ke database (INSERT/CREATE)
if ($action == 'create') {
    $kode = $_POST['kode'];
    $nama = $_POST['nama'];
    $harga = $_POST['harga'];
    $jumlah = $_POST['jumlah'];
    $subtotal = $_POST['subtotal'];

    $result = $conn->query("INSERT INTO penjualan (kode, nama, harga, jumlah, subtotal) VALUES('$kode', '$nama', '$harga', '$jumlah', '$subtotal'");

    if ($result) {
        $res['message'] = "Data berhasil disimpan.";
    } else {
        $res['error'] = true;
        $res['message'] = "Data gagal disimpan.";
    }
}

// Mengubah data dari database (UPDATE)

if ($action == 'update') {
    $id = $_POST['id'];
    $kode = $_POST['kode'];
    $nama = $_POST['nama'];
    $harga = $_POST['harga'];
    $jumlah = $_POST['jumlah'];
    $subtotal = $_POST['subtotal'];

    $result = $conn->query("UPDATE penjualan SET kode='$kode', nama='$nama', harga='$harga',jumlah='$jumlah',subtotal='$subtotal' WHERE id='$id'");

    if ($result) {
        $res['message'] = "Data berhasil diubah.";
    } else {
        $res['error'] = true;
        $res['message'] = "Data gagal diubah.";
    }
}

// Menghapus data (DELETE)
if ($action == 'delete') {
    $id = $_POST['id'];

    $result = $conn->query("DELETE FROM penjualan WHERE id='$id'");

    if ($result) {
        $res['message'] = "Data berhasil diubah.";
    } else {
        $res['error'] = true;
        $res['message'] = "Data berhasil dihapus.";
    }
}

// Tutup Koneksi
$conn->close();

// print json encoded data
echo json_encode($res);
die();

Langkah#2 Uji Coba API Menggunakan POSTMAN

setelah kita selesai membuat coding API langkah berikutnya adalah melakukan uji coba menggunakan aplikasi postman sebelum tahap pembuatan aplikasi client, jika anda belum memiliki postman silahkan download terlebih dahulu pada link berikut : https://www.postman.com/downloads/ jika sudah install ikuti langkah selanjutnya :

1. Melakukan Registrasi

ketika selesai melakukan instalasi postman akan meminta kita untuk melakukan registrasi, terdapat beberapa pilihan registrasi bisa dilakukan secara langsung ataupun dapat juga menggunakan akun google, tahap registrasi sangat penting karena uji coba yang kita lakukan akan tersimpan secara otomatis sehingga jika kita berpindah kepada komputer lain data akan tersimpan.

2. Membuat Workspace

Workpspace merupakan langkah selanjutnya dalam penggunaan postman, pembuatan workspace sebaiknya dilakukan untuk satu project jika kita membuat project lain maka kita harus melakukan workspace baru hal ini dimaksudkan agar memudahkan kita dalam melakukan pekerjaan dan tidak tercampur dengan project lain.

3. Membuat Environment

Environtment dapat digunakan untuk melakukan penyimpanan url utama api kita, pada menu environtment kita akan diminta untuk mengisi url utama dengan penamaan variabel,initial value,current value. penamaan variabel sebainya singkat dan mudah dipahami.

4. Membuat Collection

Collection pada postman digunakan untuk menampung request-request yang kita lakukan, setelah kita membuat collection, kita perlu memilih environmen yang kita buat pada langkah 3. kita dapat menambahkan folder pada collection dengan klik kanan pada collection kemudian add folder, setelah itu kita dapat mengganti nama folder tersebut dan kita sesuaikan dengan data apa yang akan kita uji coba.

5. Membuat Request

Pembuatan request dapat kita lakukan pada folder yang sudah kita buat pada collection, untuk membuatanya klik kanan pada folder tersebut kemudian tekan menu add request.

Contoh Aplikasi