PHP と Vue を使用してオンライン従業員勤怠システムを開発する方法

PHP と Vue を使用してオンラインの従業員勤怠管理システムを開発する方法

勤怠管理システムは、企業管理にとって重要なツールの 1 つです。企業が従業員の勤怠状況を監視するのに役立ちます。従業員の勤怠をリアルタイムに把握し、業務効率と管理レベルを向上させます。この記事では、PHP と Vue フレームワークを使用してシンプルなオンライン従業員勤怠システムを開発する方法を紹介し、具体的なコード例を示します。

1. 環境の準備:
開始する前に、次のソフトウェアとツールをインストールする必要があります:

1. PHP 環境: 開発環境で、PHP がインストールされていることを確認してください。がインストールされており、PHP スクリプトを実行できるようになります。
2. MySQL データベース: 勤怠システムは、データベースを使用して従業員情報と勤怠記録を保存する必要があります。 MySQL をインストールし、関連データを保存するデータベースを作成する必要があります。
3. Vue.js: Vue.js は、ユーザー インターフェイスを構築するための人気のある JavaScript フレームワークです。 Vue.js をプロジェクトに導入し、その基本的な使用法を理解する必要があります。

2. データベース テーブルの作成:
従業員情報と勤怠記録を保存するには、従業員テーブルと勤怠記録テーブルという 2 つのデータベース テーブルを作成する必要があります。

1. Employee テーブル構造:
   CREATE TABLE members (
   id ​​INT AUTO_INCREMENT PRIMARY KEY,
   name VARCHAR(100) NOT NULL,
   Department VARCHAR(100) NOT NULL
   );
2. 勤怠記録テーブルの構造:
   CREATE TABLE 勤怠 (
   id ​​INT AUTO_INCREMENT PRIMARY KEY,
   employee_id INT NOT NULL,
   Clock_in DATETIME NOT NULL,
   Clock_out DATETIME,
   FOREIGN KEY (employee_id) REFERENCESemployee(id)
   );

3. バックエンド開発:

1. PHP を作成するファイル バックエンド インターフェイスとして、attence.php という名前が付けられます。
2. データベースに接続します:
   $conn = new mysqli("localhost", "username", "password", "database");
   if ($ conn- >connect_error) {
   die("接続に失敗しました: " . $conn->connect_error);
   }

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

4. 従業員の追加:
   $name = $_POST['name'];
   $部門 = $_POST['部門'];

$sql = "従​​業員 (名前、部門) の値に挿入 ('$name', '$Department')";
if ($conn->query($sql) === TRUE) {

echo "New employee added successfully";

} else {

echo "Error: " . $sql . "<br>" . $conn->error;

}

5. 出席レコードを取得:
   $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 );

6. クロックイン:
   $employee_id = $_POST['employee_id'];
   $クロック_in = $_POST['クロックイン'] ;
   $クロック_out = $_POST['クロックアウト'];

$sql = "出席状況 (従業員 ID、クロックイン、クロックアウト) の値に挿入 ('$従業員 ID', '$クロック_in', '$ Clock_out ')";
if ($conn->query($sql) === TRUE) {

echo "Clock in/out recorded successfully";

} else {

echo "Error: " . $sql . "<br>" . $conn->error;

}

四、フロントエンド開発:

1. 従業員リストを表示し、従業員を追加し、レコードを記録するための Vue コンポーネントを作成します。
   

以上がPHP と Vue を使用してオンライン従業員勤怠システムを開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。