How to use PHP and Vue to build the check-in location setting function for employee attendance

How to use PHP and Vue to build the check-in location setting function for employee attendance

In recent years, with the development of technology and the progress of society, more and more enterprises Public institutions began to adopt electronic methods for employee attendance management. One of the important links is the setting of employee check-in locations. In this article, we will introduce how to use PHP and Vue to build a check-in location setting function for employee attendance, and provide specific code examples.

1. Preparation

Before we start, we need to prepare the required development environment. We need a server, which can be built using Apache or Nginx. At the same time, we also need to install PHP and MySQL as the back-end development language and database. In addition, we also need to install Node.js and Vue.js as front-end development tools.

2. Create a database

First, we need to create a database to store employee related information and check-in locations. You can use tools such as Navicat or phpMyAdmin to create a database named "attendance" and create two tables in it, "employees" and "locations".

The structure of the employees table is as follows:

CREATE TABLE employees (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(50) NOT NULL,
  job_title VARCHAR(50) NOT NULL,
  department VARCHAR(50) NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

The structure of the locations table is as follows:

CREATE TABLE locations (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(50) NOT NULL,
  address VARCHAR(100) NOT NULL,
  latitude DECIMAL(10, 6) NOT NULL,
  longitude DECIMAL(10, 6) NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

3. Back-end development

1. Create an api. php file that handles requests sent by the front end and interacts with the database.

<?php
header('Content-Type: application/json');
$method = $_SERVER['REQUEST_METHOD'];

// 处理GET请求，查询数据库中的员工和签到地点信息
if ($method === 'GET') {
  $action = $_GET['action'];
  
  // 查询员工信息
  if ($action === 'employees') {
    // 连接数据库
    $conn = new mysqli('localhost', 'root', '', 'attendance');
    mysqli_set_charset($conn, "utf8");
    
    // 查询数据库中的员工信息
    $result = $conn->query('SELECT * FROM employees');
    $employees = $result->fetch_all(MYSQLI_ASSOC);
    
    // 返回员工信息
    echo json_encode($employees);
    
    // 关闭数据库连接
    $conn->close();
  }
  
  // 查询签到地点信息
  else if ($action === 'locations') {
    // 连接数据库
    $conn = new mysqli('localhost', 'root', '', 'attendance');
    mysqli_set_charset($conn, "utf8");
    
    // 查询数据库中的签到地点信息
    $result = $conn->query('SELECT * FROM locations');
    $locations = $result->fetch_all(MYSQLI_ASSOC);
    
    // 返回签到地点信息
    echo json_encode($locations);
    
    // 关闭数据库连接
    $conn->close();
  }
}

// 处理POST请求，添加员工和签到地点信息到数据库
else if ($method === 'POST') {
  $data = json_decode(file_get_contents('php://input'), true);
  $action = $data['action'];

  // 添加员工信息
  if ($action === 'addEmployee') {
    // 连接数据库
    $conn = new mysqli('localhost', 'root', '', 'attendance');
    mysqli_set_charset($conn, "utf8");
    
    // 添加员工信息到数据库
    $name = $data['name'];
    $job_title = $data['job_title'];
    $department = $data['department'];
    $conn->query("INSERT INTO employees (name, job_title, department) VALUES ('$name', '$job_title', '$department')");

    // 返回成功信息
    echo json_encode(['status' => 'success']);

    // 关闭数据库连接
    $conn->close();
  }
  
  // 添加签到地点信息
  else if ($action === 'addLocation') {
    // 连接数据库
    $conn = new mysqli('localhost', 'root', '', 'attendance');
    mysqli_set_charset($conn, "utf8");

    // 添加签到地点信息到数据库
    $name = $data['name'];
    $address = $data['address'];
    $latitude = $data['latitude'];
    $longitude = $data['longitude'];
    $conn->query("INSERT INTO locations (name, address, latitude, longitude) VALUES ('$name', '$address', '$latitude', '$longitude')");

    // 返回成功信息
    echo json_encode(['status' => 'success']);

    // 关闭数据库连接
    $conn->close();
  }
}
?>

2. Start the server and place the api.php file in the root directory of the server.

4. Front-end development

1. Create an index.html file to display information about employees and check-in locations, and provide the function of adding employees and check-in locations.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>员工考勤签到地点设置</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h2 id="员工信息">员工信息</h2>
    <table>
      <tr>
        <th>姓名</th>
        <th>职位</th>
        <th>部门</th>
      </tr>
      <tr v-for="employee in employees">
        <td>{{ employee.name }}</td>
        <td>{{ employee.job_title }}</td>
        <td>{{ employee.department }}</td>
      </tr>
    </table>

    <form @submit.prevent="addEmployee">
      <input type="text" v-model="newEmployee.name" placeholder="姓名" required>
      <input type="text" v-model="newEmployee.job_title" placeholder="职位" required>
      <input type="text" v-model="newEmployee.department" placeholder="部门" required>
      <button type="submit">添加员工</button>
    </form>

    <h2 id="签到地点">签到地点</h2>
    <table>
      <tr>
        <th>名称</th>
        <th>地址</th>
        <th>经度</th>
        <th>纬度</th>
      </tr>
      <tr v-for="location in locations">
        <td>{{ location.name }}</td>
        <td>{{ location.address }}</td>
        <td>{{ location.latitude }}</td>
        <td>{{ location.longitude }}</td>
      </tr>
    </table>

    <form @submit.prevent="addLocation">
      <input type="text" v-model="newLocation.name" placeholder="名称" required>
      <input type="text" v-model="newLocation.address" placeholder="地址" required>
      <input type="text" v-model="newLocation.latitude" placeholder="经度" required>
      <input type="text" v-model="newLocation.longitude" placeholder="纬度" required>
      <button type="submit">添加签到地点</button>
    </form>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        employees: [],
        newEmployee: {
          name: '',
          job_title: '',
          department: ''
        },
        locations: [],
        newLocation: {
          name: '',
          address: '',
          latitude: '',
          longitude: ''
        }
      },
      methods: {
        addEmployee() {
          fetch('api.php', {
            method: 'POST',
            body: JSON.stringify({
              action: 'addEmployee',
              name: this.newEmployee.name,
              job_title: this.newEmployee.job_title,
              department: this.newEmployee.department
            })
          })
          .then(() => {
            this.employees.push(this.newEmployee);
            this.newEmployee = { name: '', job_title: '', department: '' };
          });
        },
        addLocation() {
          fetch('api.php', {
            method: 'POST',
            body: JSON.stringify({
              action: 'addLocation',
              name: this.newLocation.name,
              address: this.newLocation.address,
              latitude: this.newLocation.latitude,
              longitude: this.newLocation.longitude
            })
          })
          .then(() => {
            this.locations.push(this.newLocation);
            this.newLocation = { name: '', address: '', latitude: '', longitude: '' };
          });
        }
      },
      mounted() {
        fetch('api.php?action=employees')
          .then(response => response.json())
          .then(employees => {
            this.employees = employees;
          });

        fetch('api.php?action=locations')
          .then(response => response.json())
          .then(locations => {
            this.locations = locations;
          });
      }
    });
  </script>
</body>
</html>

2. Also place the index.html file in the root directory of the server.

5. Run the project

1. Start Apache (or Nginx) and MySQL server.
2. Access the index.html file in the browser, you can see the information of employees and check-in locations, and you can add new employees and check-in locations.

Through the above steps, we successfully used PHP and Vue to build the check-in location setting function for employee attendance, and provided specific code examples. We hope it will be helpful to you. Of course, in practical applications, further development and improvement are required based on specific needs.

The above is the detailed content of How to use PHP and Vue to build the check-in location setting function for employee attendance. For more information, please follow other related articles on the PHP Chinese website!