PHP と Vue を使用してオンライン従業員勤怠システムを開発する方法
Sep 25, 2023 pm 01:45 PM
PHP と Vue を使用してオンラインの従業員勤怠管理システムを開発する方法
勤怠管理システムは、企業管理にとって重要なツールの 1 つです。企業が従業員の勤怠状況を監視するのに役立ちます。従業員の勤怠をリアルタイムに把握し、業務効率と管理レベルを向上させます。この記事では、PHP と Vue フレームワークを使用してシンプルなオンライン従業員勤怠システムを開発する方法を紹介し、具体的なコード例を示します。
1. 環境の準備:
開始する前に、次のソフトウェアとツールをインストールする必要があります:
- PHP 環境: 開発環境で、PHP がインストールされていることを確認してください。がインストールされており、PHP スクリプトを実行できるようになります。
- MySQL データベース: 勤怠システムは、データベースを使用して従業員情報と勤怠記録を保存する必要があります。 MySQL をインストールし、関連データを保存するデータベースを作成する必要があります。
- Vue.js: Vue.js は、ユーザー インターフェイスを構築するための人気のある JavaScript フレームワークです。 Vue.js をプロジェクトに導入し、その基本的な使用法を理解する必要があります。
2. データベース テーブルの作成:
従業員情報と勤怠記録を保存するには、従業員テーブルと勤怠記録テーブルという 2 つのデータベース テーブルを作成する必要があります。
- Employee テーブル構造:
CREATE TABLE members (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100) NOT NULL,
Department VARCHAR(100) NOT NULL
); - 勤怠記録テーブルの構造:
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. バックエンド開発:
- PHP を作成するファイル バックエンド インターフェイスとして、attence.php という名前が付けられます。
- データベースに接続します:
$conn = new mysqli("localhost", "username", "password", "database");
if ($ conn- >connect_error) {
die("接続に失敗しました: " . $conn->connect_error);
} -
すべての従業員情報を取得します:
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); - 従業員の追加:
$name = $_POST['name'];
$部門 = $_POST['部門'];
$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 );- クロックイン:
$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;
}
四、フロントエンド開発:
従業員リストを表示し、従業員を追加し、レコードを記録するための Vue コンポーネントを作成します。
従業員リスト
{{ employee.name }} - {{ employee.department }}ログイン後にコピー
従業員を追加
< input type="text" v-model="newEmployee.name" placeholder="名前">
パンチインレコード
＃＃＃スタッフ＃＃＃ ＃＃＃労働時間＃＃＃ {{ レコード.クロックイン }}非番時間 {{ レコード名 }} {{ レコード.クロックアウト }} 在Vue组件中，发送HTTP请求并获取数据：
人気の記事
レポ：チームメイトを復活させる方法3週間前 By 尊渡假赌尊渡假赌尊渡假赌スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？3週間前 By DDDR.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）1週間前 By 尊渡假赌尊渡假赌尊渡假赌ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法3週間前 By 尊渡假赌尊渡假赌尊渡假赌
人気の記事
レポ：チームメイトを復活させる方法3週間前 By 尊渡假赌尊渡假赌尊渡假赌スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？3週間前 By DDDR.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）1週間前 By 尊渡假赌尊渡假赌尊渡假赌ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法3週間前 By 尊渡假赌尊渡假赌尊渡假赌
ホットな記事タグ
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Gmailメールのログイン入り口はどこですか？
7292
9
Java チュートリアル
1622
14
CakePHP チュートリアル
1342
46
Laravel チュートリアル
1259
25
PHP チュートリアル
1206
29
See all articles
Ubuntu および Debian 用の PHP 8.4 インストールおよびアップグレード ガイド
Dec 24, 2024 pm 04:42 PM
Ubuntu および Debian 用の PHP 8.4 インストールおよびアップグレード ガイド
PHP 開発用に Visual Studio Code (VS Code) をセットアップする方法
Dec 20, 2024 am 11:31 AM
PHP 開発用に Visual Studio Code (VS Code) をセットアップする方法
