How to use PHP and Vue to build an online employee attendance entry interface

How to use PHP and Vue to build an online employee attendance entry interface

In modern enterprises, employee attendance is a problem that managers must face and solve. With the development of technology, traditional paper attendance has gradually been replaced by electronic attendance systems. Building an online employee attendance entry interface is a very practical method, which can facilitate managers to record employees' attendance and conduct statistical analysis. This article will introduce how to use PHP and Vue to build such an online entry interface, and give specific code examples.

1. Preliminary preparation

First make sure you have correctly installed the PHP and Vue operating environments. PHP is a server-side scripting language, while Vue is a popular JavaScript framework that provides tools for building user interfaces.

2. Create a database

First we need to create a database named "attendance" and create a table named "employees" in it. The table will contain the basic information of the employee, such as employee number, name, etc., as well as attendance data. The specific table structure is as follows:

CREATE TABLE employees (
  id INT(11) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
  emp_id INT(11) UNSIGNED,
  name VARCHAR(50),
  attendance_date DATE,
  time_in TIME,
  time_out TIME
);

3. Back-end development

We use PHP to handle back-end logic. First create a file named "index.php" and add the following code:

<?php
 
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
header("Access-Control-Allow-Methods: POST");
header("Access-Control-Max-Age: 3600");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");

$host = "localhost";
$db_name = "attendance";
$username = "root";
$password = "";

$conn = new PDO("mysql:host=".$host.";dbname=".$db_name, $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

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

$emp_id = $data->emp_id;
$name = $data->name;
$attendance_date = $data->attendance_date;
$time_in = $data->time_in;
$time_out = $data->time_out;

$query = "INSERT INTO employees (emp_id, name, attendance_date, time_in, time_out) VALUES (:emp_id, :name, :attendance_date, :time_in, :time_out)";
$stmt = $conn->prepare($query);
$stmt->bindParam(":emp_id", $emp_id);
$stmt->bindParam(":name", $name);
$stmt->bindParam(":attendance_date", $attendance_date);
$stmt->bindParam(":time_in", $time_in);
$stmt->bindParam(":time_out", $time_out);

if($stmt->execute()){
    http_response_code(201);
    echo json_encode(array("message" => "Attendance record was created."));
}
else{
    http_response_code(503);
    echo json_encode(array("message" => "Unable to create attendance record."));
}
?>

The above code first sets the response header to allow cross-domain requests. Then connect to the database, parse the received data into JSON format, and insert them into the employees table.

4. Front-end development

In the front-end part, we use Vue to build the user interface. Use Vue CLI to quickly create a project and install the axios plug-in. You can execute the following command in the terminal:

vue create attendance
cd attendance
npm install axios

Next we need to modify the src/App.vue file and add the following code:

<template>
  <div id="app">
    <h1>员工考勤录入</h1>

    <form @submit.prevent="submit">
      <label for="emp_id">员工编号:</label>
      <input type="text" v-model="emp_id"> <br>

      <label for="name">员工姓名:</label>
      <input type="text" v-model="name"> <br>

      <label for="attendance_date">考勤日期:</label>
      <input type="date" v-model="attendance_date"> <br>

      <label for="time_in">签到时间:</label>
      <input type="time" v-model="time_in"> <br>

      <label for="time_out">签退时间:</label>
      <input type="time" v-model="time_out"> <br>

      <button type="submit">提交</button>
    </form>

    <p v-if="message">{{ message }}</p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'App',
  data() {
    return {
      emp_id: '',
      name: '',
      attendance_date: '',
      time_in: '',
      time_out: '',
      message: ''
    }
  },
  methods: {
    submit() {
      axios.post('http://localhost/index.php', {
        emp_id: this.emp_id,
        name: this.name,
        attendance_date: this.attendance_date,
        time_in: this.time_in,
        time_out: this.time_out
      })
        .then(response => {
          this.message = response.data.message
        })
        .catch(error => {
          this.message = error.response.data.message
        })
    }
  }
}
</script>

<style>
#app {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  margin-top: 60px;
}
</style>

The above code creates a simple form that contains fields such as employee number, name, attendance date, check-in time, and check-out time. When the submit button is clicked, a POST request will be sent to the index.php file on the backend through axios. After receiving the response, the corresponding prompt information will be displayed on the interface.

5. Run and test

Execute the following command in the terminal to start the front-end page:

npm run serve

At the same time, you need to put the back-end file index.php in Apache or Nginx in the root directory of the server. Make sure you have started the web server and MySQL server.

By accessing http://localhost:8080, you should be able to see a simple attendance entry interface. After filling out the form and clicking submit, the corresponding attendance records will be saved to the database.

Summary

This article introduces how to use PHP and Vue to build an online employee attendance entry interface. We created a table containing basic employee information and attendance data, used PHP to handle the back-end logic, and used Vue to build the user interface. Through this interface, managers can easily enter employee attendance records. I hope this example can help readers better understand how to use PHP and Vue for web development.

The above is the detailed content of How to use PHP and Vue to build an online employee attendance entry interface. For more information, please follow other related articles on the PHP Chinese website!