찾다

집 >백엔드 개발 >PHP 튜토리얼 >PHP와 Vue를 사용하여 직원 출석체크인 위치 설정 기능을 구축하는 방법

PHP와 Vue를 사용하여 직원 출석체크인 위치 설정 기능을 구축하는 방법

WBOY
WBOY원래의
2023-09-25 17:41:05773검색

PHP와 Vue를 사용하여 직원 출석체크인 위치 설정 기능을 구축하는 방법

PHP 및 Vue를 사용하여 직원 출석을 위한 체크인 위치 설정 기능을 구축하는 방법

최근 기술 발전과 사회 발전으로 인해 점점 더 많은 기업과 기관에서 전자 방식을 사용하기 시작했습니다. 직원 출석을 관리합니다. 중요한 링크 중 하나는 직원 체크인 위치 설정입니다. 이번 글에서는 PHP와 Vue를 활용하여 직원 출석체크인 위치 설정 기능을 구축하는 방법을 소개하고, 구체적인 코드 예시를 제공하겠습니다.

1. 준비

시작하기 전에 필요한 개발 환경을 준비해야 합니다. Apache 또는 Nginx를 사용하여 구축할 수 있는 서버가 필요합니다. 동시에 백엔드 개발 언어 및 데이터베이스로 PHP와 MySQL도 설치해야 합니다. 또한 프런트엔드 개발 도구로 Node.js와 Vue.js도 설치해야 합니다.

2. 데이터베이스 만들기

먼저 직원 관련 정보와 체크인 위치를 저장할 데이터베이스를 만들어야 합니다. Navicat 또는 phpMyAdmin과 같은 도구를 사용하여 "attendance"라는 데이터베이스를 생성하고 그 안에 "employees" 및 "locations"라는 두 개의 테이블을 생성할 수 있습니다.

직원 테이블의 구조는 다음과 같습니다. 

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
);

위치 테이블의 구조는 다음과 같습니다. 

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. 백엔드 개발

  1. 프런트에서 보낸 요청을 처리하기 위한 api.php 파일을 생성합니다. -종료하고 데이터베이스와 상호 작용합니다. 
<?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();
  }
}
?>
  1. 서버를 시작하고 api.php 파일을 서버의 루트 디렉터리에 넣습니다.

4. 프론트엔드 개발

  1. index.html 파일을 생성하여 직원 및 체크인 위치에 대한 정보를 표시하고, 직원 및 체크인 위치를 추가하는 기능을 제공합니다. 
<!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>员工信息</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>签到地点</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>
  1. 또한 index.html 파일을 서버의 루트 디렉터리에 배치하세요.

5. 프로젝트를 실행합니다.

  1. Apache(또는 Nginx)와 MySQL 서버를 시작합니다.
  2. 브라우저에서 index.html 파일에 접속하면 직원 정보와 체크인 위치를 확인할 수 있고, 신규 직원과 체크인 위치를 추가할 수 있습니다.

위 단계를 통해 PHP와 Vue를 사용하여 직원 출석을 위한 체크인 위치 설정 기능을 성공적으로 구축했으며, 구체적인 코드 예제가 도움이 되길 바랍니다. 물론 실제 적용에서는 특정 요구에 따라 추가 개발과 개선이 필요합니다.

위 내용은 PHP와 Vue를 사용하여 직원 출석체크인 위치 설정 기능을 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

php mysql nginx html JS 数据库 apache phpMyAdmin navicat
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：PHP와 Vue를 사용하여 창고 관리에 최적화된 창고 구성 기능을 개발하는 방법다음 기사：PHP와 Vue를 사용하여 창고 관리에 최적화된 창고 구성 기능을 개발하는 방법

관련 기사

더보기