PHP と Vue を使用してオンライン従業員勤怠記録クエリを開発する方法

PHP と Vue を使用して従業員の勤怠に関するオンライン パンチイン レコード クエリを開発する方法

現代の企業では、従業員の勤怠管理は非常に重要なタスクです。従来の手動レコードはエラーが発生しやすく、クエリや統計には不便です。 PHP と Vue の強力な機能を使用して、オンラインの従業員勤怠記録クエリ システムを開発し、勤怠管理をより効率的、便利、正確にすることができます。

1. プロジェクトの準備
開始する前に、次の開発環境とツールを準備する必要があります:

• PHP 開発環境 (XAMPP など)
• テキスト エディター (Sublime Text、Visual Studio Code など)
• MySQL データベース
• Vue.js 開発環境 (Vue CLI を使用できます)

2. データベース設計
従業員情報とパンチイン記録を保存するための MySQL データベースを作成する必要があります。 「attendance_management」という名前のデータベースを設計し、従業員と勤怠という 2 つのテーブルを含めます。従業員テーブルは、id (自動インクリメント主キー)、名前 (従業員名)、部門 (従業員が所属する部門) などのフィールドを含む従業員の基本情報を格納するために使用されます。出席テーブルは、id (自動インクリメント主キー)、employee_id (従業員 ID)、check_in_time (時刻)、check_out_time (時刻) などのフィールドを含む出席レコードを保存するために使用されます。

3. バックエンド開発

1. 「attendance_management」という名前のプロジェクト フォルダーを作成します。
2. プロジェクト フォルダーの下に「backend」という名前のフォルダーを作成し、バックグラウンド関連のコードを保存します。
3. バックエンド フォルダーの下に「config」という名前のフォルダーを作成し、構成ファイルを保存します。
4. バックエンド フォルダーの下に「api」という名前のフォルダーを作成し、API 関連のコードを保存します。
5. config フォルダーに「database.php」という名前のファイルを作成し、データベース接続情報を設定します。

return [

'host' => 'localhost',
'username' => 'root',
'password' => 'your_password',
'database' => 'attendance_management',

];
?>

6. api フォルダーの下に名前を作成します。ファイル「employees.php」は、従業員関連の API リクエストを処理するために使用されます。

require_once '../config/database.php';

クラス従業員 {

private $conn;
private $table = 'employees';

public function __construct($db) {
    $this->conn = $db;
}

public function getEmployees() {
    $query = 'SELECT * FROM ' . $this->table;

    $stmt = $this->conn->prepare($query);
    $stmt->execute();

    return $stmt;
}

}
?> ;

7. 出席関連の API リクエストを処理するために、api フォルダーに「attendance.php」という名前のファイルを作成します。

require_once '../config/database.php';

クラス出席 {

private $conn;
private $table = 'attendance';

public function __construct($db) {
    $this->conn = $db;
}

public function getAttendanceByEmployeeId($employeeId) {
    $query = 'SELECT * FROM ' . $this->table . ' WHERE employee_id = ?';

    $stmt = $this->conn->prepare($query);
    $stmt->bindParam(1, $employeeId);
    $stmt->execute();

    return $stmt;
}

}
?> ;

4. フロントエンド開発

1. プロジェクト フォルダーでコマンド ラインを開き、次のコマンドを実行して Vue CLI をインストールします (Node.js がインストールされていることを確認する必要があります) ):

npm install -g @vue/cli

2. プロジェクト フォルダーで次のコマンドを実行して、「frontend」という名前の Vue プロジェクトを作成します。

vue createfrontend

3. フロントエンド フォルダーに入り、次のコマンドを実行して Vue Router と Axios をインストールします。

cdfrontend
npm install vue -router axios

4. frontend/src ディレクトリに「components」という名前のフォルダーを作成し、Vue コンポーネントを保存します。
5. コンポーネント フォルダーの下に「Attendance.vue」という名前のファイルを作成し、出席記録を表示します。

<div>
    <h2>员工考勤记录</h2>
    <select v-model="selectedEmployee" @change="onEmployeeChange">
        <option v-for="employee in employees" :value="employee.id">{{ employee.name }}</option>
    </select>
    <table>
        <thead>
            <tr>
                <th>打卡时间</th>
                <th>下班打卡时间</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="record in attendance">
                <td>{{ record.check_in_time }}</td>
                <td>{{ record.check_out_time }}</td>
            </tr>
        </tbody>
    </table>
</div>

テンプレート>

デフォルトのエクスポート {

data() {
    return {
        employees: [],
        selectedEmployee: null,
        attendance: []
    };
},
mounted() {
    this.getEmployees();
},
methods: {
    getEmployees() {
        axios.get('http://localhost/backend/api/employees.php')
            .then(response => {
                this.employees = response.data;
            })
            .catch(error => {
                console.log(error);
            });
    },
    onEmployeeChange() {
        axios.get('http://localhost/backend/api/attendance.php?employeeId=' + this.selectedEmployee)
            .then(response => {
                this.attendance = response.data;
            })
            .catch(error => {
                console.log(error);
            });
    }
}

};

6. frontend/src/router/index.js ファイルにルーティング構成を追加します。

「vue」から Vue をインポート;
「vue-router」から VueRouter をインポート;
「../components/Attendance.vue」から出席をインポート;

# #Vue.use(VueRouter);

const ルート = [

{
    path: '/',
    name: 'Attendance',
    component: Attendance
}

];

const router = new VueRouter({

mode: 'history',
base: process.env.BASE_URL,
routes

});

エクスポート デフォルト ルーター;

5. プロジェクトの実行

まず、PHP 開発環境 (XAMPP など) を起動し、データベース接続が正常であることを確認します。
1. バックエンド フォルダーに「.htaccess」という名前のファイルを作成し、URL 書き換えを構成します。

RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$index.php?/$1 [L]

フロントエンド フォルダーで次のコマンドを実行して Vue プロジェクトを実行します:

npm runserve

ブラウザを開いて http にアクセスします。 :/ /localhost:8080、従業員の勤怠記録インターフェイスが表示されます。
4. 従業員を選択すると、ページは従業員の ID に基づいてバックエンド API を呼び出し、従業員のパンチイン レコードを取得してテーブルに表示します。

上記の開発手順により、PHP と Vue を使用して開発したオンライン従業員勤怠チェックイン記録クエリ システムの実装に成功しました。従業員を選択して勤怠記録を閲覧できるため、勤怠管理の効率化だけでなく、人的ミスの発生も軽減されます。同時に、このプロジェクトでは、フルスタック開発のために PHP と Vue を組み合わせる方法の基本的な手順と技術的なポイントも示します。この記事があなたのお役に立てば幸いです。また、あなたのプログラミングの成功を祈っています。

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