How to Use PHP and Vue to Set Membership Points Expiration After Payment

Implementing Membership Points Expiration After Payment with PHP and Vue

Setting expiration dates for membership points is a key feature in many e-commerce and loyalty systems. Merchants often reward users with points after a purchase, but these points are not valid forever—they must expire based on specific rules. This article will show how to use PHP and Vue to build a membership points expiration system.

Project Architecture

This example uses PHP for the backend, Vue as the frontend framework, and MySQL as the database. This stack provides a powerful and efficient structure—PHP handles backend logic while Vue offers a modern, component-based frontend experience.

Database Design

We need a database table to store the membership points information. The table should include at least the following fields:

• user_id: User ID to distinguish users;
• points: Number of points awarded;
• expire_date: Expiration date of the points.

Backend Implementation (PHP)

In the backend, create a PHP file that receives the user ID and points from the frontend, calculates the expiration date, and saves the data in the database.

<?php
// Connect to the database
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "your_database";

$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Receive parameters from frontend
$user_id = $_POST['user_id'];
$points = $_POST['points'];

// Calculate expiration date (example: 30 days)
$now = date('Y-m-d');
$expire_date = date('Y-m-d', strtotime($now . ' + 30 days'));

// Insert data into database
$sql = "INSERT INTO points (user_id, points, expire_date) VALUES ('$user_id', '$points', '$expire_date')";

if ($conn->query($sql) === TRUE) {
    echo "Points set successfully";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();
?>

Frontend Development (Vue)

On the frontend, create a Vue component that allows input of user ID and points, and sends the data to the backend via an HTTP request.

<template>
  <div>
    <input type="text" v-model="user_id" placeholder="Enter User ID" />
    <input type="text" v-model="points" placeholder="Enter Points" />
    <button @click="setPoints">Set Points</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user_id: "",
      points: ""
    };
  },
  methods: {
    setPoints() {
      axios
        .post("points.php", {
          user_id: this.user_id,
          points: this.points
        })
        .then(function(response) {
          console.log(response.data);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>

To use axios in your project, make sure it’s installed and imported in the main entry file.

import Vue from "vue";
import App from "./App.vue";
import axios from "axios";

Vue.prototype.$http = axios;

new Vue({
  render: h => h(App)
}).$mount("#app");

Conclusion

By combining PHP and Vue, we can efficiently implement a membership points expiration system that activates after payment. While this example is simplified, it provides a clear foundation for building more complex features. In real-world projects, you can enhance it further by adding scheduled cleanup tasks, security validation, and flexible point calculation logic to create a robust membership rewards platform.