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. バックエンド開発
<?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();
}
}
?>4. フロントエンド開発
<!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>5. プロジェクトを実行します
上記の手順により、PHP と Vue を使用して従業員の出退勤チェックイン場所設定機能を構築することができ、具体的なコード例を提供しましたので、ご参考になれば幸いです。もちろん、実際のアプリケーションでは、特定のニーズに基づいてさらなる開発と改善が必要です。
以上がPHPとVueを使って社員勤怠チェックイン場所設定機能を構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![PHP 実践開発入門: PHP クイック作成 [中小企業フォーラム]](https://img.php.cn/upload/course/000/000/035/5d27fb58823dc974.jpg)
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
