PHP と Vue を使用してオンラインの従業員勤怠管理システムを開発する方法
勤怠管理システムは、企業管理にとって重要なツールの 1 つです。企業が従業員の勤怠状況を監視するのに役立ちます。従業員の勤怠をリアルタイムに把握し、業務効率と管理レベルを向上させます。この記事では、PHP と Vue フレームワークを使用してシンプルなオンライン従業員勤怠システムを開発する方法を紹介し、具体的なコード例を示します。
1. 環境の準備:
開始する前に、次のソフトウェアとツールをインストールする必要があります:
2. データベース テーブルの作成:
従業員情報と勤怠記録を保存するには、従業員テーブルと勤怠記録テーブルという 2 つのデータベース テーブルを作成する必要があります。
3. バックエンド開発:
すべての従業員情報を取得します:
php
$sql = "SELECT * FROM 従業員";
$result = $conn->query($sql);
$rows = array();
if ($result-> ;num_rows > 0) {
while($row = $result->fetch_assoc()) {
$rows[] = $row;
}
}
echo json_encode($rows);
$sql = "従業員 (名前、部門) の値に挿入 ('$name', '$Department')";
if ($conn->query($sql) === TRUE) {
echo "New employee added successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
出席レコードを取得:
$sql = "出席を選択.* 、従業員.name FROM 勤怠 INNER JOIN 従業員 ON 勤怠.employee_id = 従業員.id";
$result = $conn->query($sql);
$rows = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$rows[] = $row;
}
}
echo json_encode( $rows );
$sql = "出席状況 (従業員 ID、クロックイン、クロックアウト) の値に挿入 ('$従業員 ID', '$クロック_in', '$ Clock_out ')";
if ($conn->query($sql) === TRUE) {
echo "Clock in/out recorded successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
四、フロントエンド開発:
従業員リストを表示し、従業員を追加し、レコードを記録するための Vue コンポーネントを作成します。 在Vue组件中，发送HTTP请求并获取数据：
従業員リスト
{{ employee.name }} - {{ employee.department }}
従業員を追加
< input type="text" v-model="newEmployee.name" placeholder="名前">
パンチインレコード
＃＃＃スタッフ＃＃＃
＃＃＃労働時間＃＃＃
{{ レコード.クロックイン }}非番時間
{{ レコード名 }}
{{ レコード.クロックアウト }}
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
