ホームページ > 記事 > バックエンド開発 > PHPとVueを使って社員勤怠チェックイン場所設定機能を構築する方法

PHPとVueを使って社員勤怠チェックイン場所設定機能を構築する方法

WBOYオリジナル: 2023-09-25 17:41:05718ブラウズ

PHP と Vue を使って従業員の出退勤チェックイン場所設定機能を構築する方法

近年、テクノロジーの発達や社会の進歩に伴い、、ますます多くの企業が公的機関で従業員の勤怠管理に電子的な方法を採用し始めました。重要なリンクの 1 つは、従業員のチェックイン場所の設定です。この記事では、PHPとVueを使って従業員勤怠のチェックイン場所設定機能を構築する方法と、具体的なコード例を紹介します。

1. 準備

開始する前に、必要な開発環境を準備する必要があります。 Apache または Nginx を使用して構築できるサーバーが必要です。同時に、バックエンドの開発言語とデータベースとして PHP と MySQL をインストールする必要もあります。さらに、フロントエンド開発ツールとして Node.js と Vue.js をインストールする必要があります。

2. データベースの作成

まず、従業員関連の情報とチェックイン場所を保存するデータベースを作成する必要があります。 Navicat や phpMyAdmin などのツールを使用して、「attendance」という名前のデータベースを作成し、その中に「employees」と「locations」という 2 つのテーブルを作成できます。

従業員テーブルの構造は次のとおりです:

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. バックエンド開発

フロントエンドから送信されたリクエストを処理し、データベースと対話する 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();
  }
}
?>

サーバーを起動し、api.php ファイルをサーバーのルートディレクトリに配置します。

4. フロントエンド開発

従業員やチェックイン場所の情報を表示する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>

index.html ファイルもサーバーのルートディレクトリに配置します。

5. プロジェクトを実行します

Apache (または Nginx) と MySQL サーバーを起動します。
ブラウザでindex.htmlファイルにアクセスすると、従業員やチェックイン場所の情報を確認したり、新しい従業員やチェックイン場所を追加したりできます。

上記の手順により、PHP と Vue を使用して従業員の出退勤チェックイン場所設定機能を構築することができ、具体的なコード例を提供しましたので、ご参考になれば幸いです。もちろん、実際のアプリケーションでは、特定のニーズに基づいてさらなる開発と改善が必要です。

以上がPHPとVueを使って社員勤怠チェックイン場所設定機能を構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php mysql nginx html JS 数据库 apache phpMyAdmin navicat

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：PHP と Vue を使用して、倉庫管理に最適化された倉庫構成機能を開発する方法次の記事：PHP と Vue を使用して、倉庫管理に最適化された倉庫構成機能を開発する方法

続きを見る