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 コンポーネントを作成します。
   

2. 在Vue组件中，发送HTTP请求并获取数据：
   

   

   ホットAIツール

   

   Undresser.AI Undress

   リアルなヌード写真を作成する AI 搭載アプリ

   

   AI Clothes Remover

   写真から衣服を削除するオンライン AI ツール。

   

   Undress AI Tool

   脱衣画像を無料で

   

   Clothoff.io

   AI衣類リムーバー

   

   Video Face Swap

   完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

   もっと見る

   

   人気の記事

   アサシンのクリードシャドウズ：シーシェルリドルソリューション

   3週間前 By DDD

   Windows11 KB5054979の新しいものと更新の問題を修正する方法

   2週間前 By DDD

   Atomfallのクレーンコントロールキーカードを見つける場所

   3週間前 By DDD

   アサシンクリードシャドウ - 鍛冶屋を見つけて武器と鎧のカスタマイズを解除する方法

   1 か月前 By DDD

   <🎜>：Dead Rails-すべての課題を完了する方法

   3週間前 By DDD

   もっと見る

   

   ホットツール

   

   メモ帳++7.3.1

   使いやすく無料のコードエディター

   

   SublimeText3 中国語版

   中国語版、とても使いやすい

   

   ゼンドスタジオ 13.0.1

   強力な PHP 統合開発環境

   

   ドリームウィーバー CS6

   ビジュアル Web 開発ツール

   

   SublimeText3 Mac版

   神レベルのコード編集ソフト（SublimeText3）

   もっと見る

   

   ホットトピック

   Gmailメールのログイン入り口はどこですか？

   7615

   15

   CakePHP チュートリアル

   1387

   52

   Steamのアカウント名の形式は何ですか

   88

   11

   Win11 Activation Key Permanent

   68

   19

   NYTの接続はヒントと回答です

   29

   136

   もっと見る

Related knowledge

VUEのボタンに関数を追加する方法 Apr 08, 2025 am 08:51 AM

HTMLテンプレートのボタンをメソッドにバインドすることにより、VUEボタンに関数を追加できます。 VUEインスタンスでメソッドを定義し、関数ロジックを書き込みます。

PHPの未来：適応と革新 Apr 11, 2025 am 12:01 AM

PHPの将来は、新しいテクノロジーの傾向に適応し、革新的な機能を導入することで達成されます。1）クラウドコンピューティング、コンテナ化、マイクロサービスアーキテクチャに適応し、DockerとKubernetesをサポートします。 2）パフォーマンスとデータ処理の効率を改善するために、JITコンパイラと列挙タイプを導入します。 3）パフォーマンスを継続的に最適化し、ベストプラクティスを促進します。

PHP対Python：違いを理解します Apr 11, 2025 am 12:15 AM

PHP and Python each have their own advantages, and the choice should be based on project requirements. 1.PHPは、シンプルな構文と高い実行効率を備えたWeb開発に適しています。 2。Pythonは、簡潔な構文とリッチライブラリを備えたデータサイエンスと機械学習に適しています。

PHPとPython：2つの一般的なプログラミング言語を比較します Apr 14, 2025 am 12:13 AM

PHPとPythonにはそれぞれ独自の利点があり、プロジェクトの要件に従って選択します。 1.PHPは、特にWebサイトの迅速な開発とメンテナンスに適しています。 2。Pythonは、データサイエンス、機械学習、人工知能に適しており、簡潔な構文を備えており、初心者に適しています。

PHPの現在のステータス：Web開発動向を見てください Apr 13, 2025 am 12:20 AM

PHPは、現代のWeb開発、特にコンテンツ管理とeコマースプラットフォームで依然として重要です。 1）PHPには、LaravelやSymfonyなどの豊富なエコシステムと強力なフレームワークサポートがあります。 2）パフォーマンスの最適化は、Opcacheとnginxを通じて達成できます。 3）PHP8.0は、パフォーマンスを改善するためにJITコンパイラを導入します。 4）クラウドネイティブアプリケーションは、DockerおよびKubernetesを介して展開され、柔軟性とスケーラビリティを向上させます。

Vueにタグをジャンプする方法 Apr 08, 2025 am 09:24 AM

VUEでタグのジャンプを実装する方法には、HTMLテンプレートでAタグを使用してHREF属性を指定する方法が含まれます。 VUEルーティングのルーターリンクコンポーネントを使用します。 JavaScriptでこれを使用します。$ router.push（）メソッド。パラメーターはクエリパラメーターに渡すことができ、ルートは動的ジャンプのルーターオプションで構成されています。

VueのDivにジャンプする方法 Apr 08, 2025 am 09:18 AM

VUEにDIV要素をジャンプするには、VUEルーターを使用してルーターリンクコンポーネントを追加するには、2つの方法があります。 @clickイベントリスナーを追加して、これを呼び出します。$ router.push（）メソッドをジャンプします。

VUE関数のパラメーターを渡す方法 Apr 08, 2025 am 07:36 AM

パラメーターをvue.js関数に渡す2つの主な方法があります。スロットを使用してデータを渡すか、バインドで関数をバインドし、パラメーターを提供します。スロットを使用してパラメーターを渡します。コンポーネント内でアクセスし、関数のパラメーターとして使用されます。バインドバインディングを使用してパラメーターを渡します：vue.jsインスタンスのバインド関数と関数パラメーターを提供します。

See all articles