<Code>

<template>

    <div class="container my-5">

        <div class="column col-lg-6 offset-lg-3">

            <div class="card bg-light">

                <div class="card-header bg-primary">

                    <h5 class="text-white "> Registration Form </h5>

                </div>

                <div class="card-body">

                    <form>

                        <div class="row my-3">

                            <label for="name" class="col-sm-2 col-form-label">Name</label>

                            <div class="col-sm-10">

                                <input type="name" class="form-control" id="name" v-model=register.name>

                            </div>

                        </div>

                        <div class="row mb-3">

                            <label for="email" class="col-sm-2 col-form-label">Email</label>

                            <div class="col-sm-10">

                                <input type="text" class="form-control" id="email" v-model=register.email>

                            </div>

                        </div>

                        <div class="row mb-3">

                            <label for="password" class="col-sm-2 col-form-label">Password</label>

                            <div class="col-sm-10">

                                <input type="text" class="form-control" id="password" v-model=register.password>

                            </div>

                        </div>

                        <div class="row mb-3">

                            <label for="age" class="col-sm-2 col-form-label">Age</label>

                            <div class="col-sm-10">

                                <input type="text" class="form-control" id="age" v-model=register.age>

                            </div>

                        </div>

                        <button type="submit" class="btn btn-outline-primary mt-3"

                            @click.prevent="onRegister">Register</button>

                    </form>

                </div>

            </div>

            <div v-if="register.spin==true">

                <div class="progress mt-5" style="height: 6px">

                    <div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" role="progressbar"

                        style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">

                    </div>

                </div>

                <p class="text-center text-secondary">Processing...</p>

            </div>

        </div>

    </div>

</template>

<script setup>

    import { useCounterStore } from '@/stores/counter'

    import { storeToRefs } from "pinia";

    const { register } = storeToRefs(useCounterStore())

    const { onRegister} = useCounterStore()

</script>

import { defineStore } from 'pinia';

import axios from 'axios';

import Swal from 'sweetalert2';

export const useCounterStore = defineStore('counter', {

  state: () => ({

    // Register Components

    register:{

      name: '',

      email: '',

      password: '',

      age: '',

      spin: false,

    },

  }),

  getters: {

    doubleCount: (state) => state.count * 2,

  },

  actions: {

    onRegister(){

      this.register.spin = true

      axios

        .post("http://localhost/bootstrap5/src/php/api_register.php", this.register)

        .then((res) => {

          let {status, message} = res.data

          if(status == 'berjaya'){ swalSuccess() }

          if(status == 'gagal'){ swalFail( message) }

        })

        .catch((error) => { console.log(error) })

        .then(() => {

          this.register.spin = false   //NOT WORK in below function

          resetRegister()

        }

      );

    },

  },

})

// -----------------------------FUNCTION ---------------------------

function swalSuccess(){

  Swal.fire({

    title: `Registration - success`,

    icon: "success",

    showConfirmButton: true,  

  });

}

function swalFail( message){

  Swal.fire({

    title: message,

    icon: "error",

    showConfirmButton: true,  

  });

}

function resetRegister(){

  useCounterStore.register = {

    name      : '',

    email     : '',

    password  : '',

    age       : '',

    spin      : false,

  }

}

<?php

  // echo "Salam, Mohd Nizam ...<br><br>" ;

  //HANDLE CORS

  header('Access-Control-Allow-Origin: *');

  header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');

  header("Access-Control-Allow-Headers: X-Requested-With, Content-Type");

  $server = "localhost";

  $username = "root";

  $password = "";

  $database = "project_01";

  // Create connection

  $conn = new mysqli($server, $username, $password, $database);

  // Check connection

  if ($conn->connect_error) {

    die("Connection failed: " . $conn->connect_error);

  }

  // echo "Connected successfully <br><br>"; 

?>

<?php

    include('api.php');

    // $email = 'mnizam@uitm.edu.my';  // FOR TESTING

    $data = json_decode(file_get_contents("php://input"),true);

    if($data != null){

        $name = $data['name'];

        $email = $data['email'];

        $password = $data['password'];

        $age = $data['age'];

        $result = mysqli_query($conn,"SELECT * FROM register WHERE email='$email'");

        $numRow = mysqli_num_rows($result);

        if( $numRow ){

            $return['message'] = $email." exists in database";

            $return['status'] = 'gagal';

            echo json_encode($return);

            exit();

        }

        $result2 = mysqli_query($conn, "INSERT INTO register (name, email, password, age) VALUES ('$name', '$email', '$password', '$age')");

        if( $result2 ){  

            $return['message'] = 'Registration - success';

            $return['status'] = 'berjaya';

        } else {  

            $return['message'] = "Server error";

            $return['status'] = 'gagal';  

        }

        echo json_encode($return);

        $conn->close();

    }

?>

<template>

<div class="container mt-4">

     <h2>Records</h2>

     <button type="button" class="btn btn-outline-primary btn-sm" @click.prevent="getRecords()">

         Get Records

     </button>

     <table class="table table-striped mt-5" v-if="record.data.length>0">

         <thead>

             <tr>

                 <th scope="col">#</th>

                 <th scope="col">Name</th>

                 <th scope="col">Email</th>

                 <th scope="col">Password</th>

                 <th scope="col">Age</th>

             </tr>

         </thead>

         <tbody>

             <tr v-for="(item, idx) in record.data " :key="item.id">

                 <td>{{ idx+1 }}</td>

                 <td>{{ item.name }}</td>

                 <td>{{ item.email }}</td>

                 <td>{{ item.password }}</td>

                 <td>{{ item.age }}</td>               

             </tr>

         </tbody>

     </table>

</div>

</template>

<script setup>

import { useCounterStore } from '@/stores/counter'

import { storeToRefs } from "pinia";

const { record } = storeToRefs(useCounterStore())

const { getRecords } = useCounterStore()

</script>

// Record Components

record: {

     data: [],

},

    getRecords(){

      axios

        .post("http://localhost/bootstrap5/src/php/api_getRecords.php")

        .then((res) => { this.record.data = res.data })

        .catch((error) => { console.log(error) })

        .then(() => { doneRecords() }

      )

    },

function doneRecords(){

  Swal.fire({

    position: "top-end",

    // icon: "success",

    html: "<h4>Records: up-to-date</h4>",

    color: "green",

    showConfirmButton: false,

    timer: 1500

  });

}

<?php

    include('api.php');

    $query = mysqli_query($conn,"SELECT * FROM register");

    $array = array();

    while($row = mysqli_fetch_assoc($query)){

        $array[] = $row;                        // add each row returned into an array

    }

    echo json_encode($array);

    $conn->close();

?>