Comment utiliser PHP et Vue pour développer une requête d'enregistrement de pointage de présence des employés en ligne

Comment utiliser PHP et Vue pour développer une requête d'enregistrement en ligne pour la présence des employés

Dans les entreprises modernes, la gestion des présences des employés est une tâche très importante. Les enregistrements manuels traditionnels sont sujets aux erreurs et peu pratiques pour les requêtes et les statistiques. Grâce aux fonctions puissantes de PHP et Vue, nous pouvons développer un système de requête en ligne pour les enregistrements de présence des employés, rendant la gestion des présences plus efficace, plus pratique et plus précise.

1. Préparation du projet
Avant de commencer, nous devons préparer l'environnement et les outils de développement suivants :

• Un environnement de développement PHP (tel que XAMPP)
• Un éditeur de texte (tel que Sublime Text, Visual Studio Code, etc. )
• Une base de données MySQL
• Environnement de développement Vue.js (vous pouvez utiliser Vue CLI)

2. Conception de la base de données
Nous devons créer une base de données MySQL pour stocker les informations sur les employés et les enregistrements de pointage. Concevez une base de données nommée "attendance_management", contenant deux tables : employés et présences. La table employes est utilisée pour stocker les informations de base des employés, notamment les champs : id (clé primaire auto-incrémentée), nom (nom de l'employé), département (service auquel il appartient), etc. La table de présence est utilisée pour stocker les enregistrements de présence, y compris les champs : id (clé primaire à incrémentation automatique), Employee_id (identifiant de l'employé), check_in_time (heure d'horloge), check_out_time (heure d'horloge), etc.

3. Développement backend

1. Créez un dossier de projet nommé "attendance_management".
2. Créez un dossier nommé "backend" sous le dossier du projet pour stocker le code lié à l'arrière-plan.
3. Créez un dossier nommé "config" sous le dossier backend pour stocker le fichier de configuration.
4. Créez un dossier nommé "api" sous le dossier backend pour stocker le code lié à l'API.
5. Créez un fichier nommé "database.php" dans le dossier de configuration pour configurer les informations de connexion à la base de données.

return [

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

];
?>

6. Créez un fichier nommé "employees.php" sous le dossier api pour gérer les requêtes API liées aux employés.

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

class Employees {

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. Créez un fichier appelé "attendance.php" sous le dossier api File , utilisé pour gérer les requêtes API liées à la présence.

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

Participation aux cours {

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. Développement front-end

1. Ouvrez la ligne de commande dans le dossier du projet, exécutez la commande suivante pour installer Vue CLI (vous devez vous assurer que Node.js est installé) :

npm install -g @vue/cli

2. Exécutez la commande suivante dans le dossier du projet pour créer une Vue projet nommé "frontend":

vue create frontend

3. Entrez le dossier frontend et exécutez la commande suivante pour installer Vue Router et Axios :

cd frontend
npm install vue-router axios

4. Créez un fichier nommé Dossier "composants dans le répertoire frontend/src", utilisé pour stocker les composants Vue.
5. Créez un fichier nommé "Attendance.vue" sous le dossier des composants pour afficher les enregistrements de présence.

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

<script><br>export par défaut {</script>

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. dans le fichier frontend/src/router/index.js Ajoutez une configuration de routage.

importer Vue depuis 'vue';
importer VueRouter depuis 'vue-router';
importer Attendance depuis '../components/Attendance.vue';

Vue.use(VueRouter);

const routes = [

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

];

const router = new VueRouter({

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

});

export default router;

5. Exécutez le projet

1. Démarrez d'abord l'environnement de développement PHP (tel que XAMPP) et assurez-vous que la connexion à la base de données est normale.
2. Créez un fichier nommé ".htaccess" sous le dossier backend pour configurer la réécriture d'URL.

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

3. Exécutez ce qui suit dans le dossier frontend Commande pour exécuter le projet Vue :

npm run serve

4. Ouvrez le navigateur et visitez http://localhost:8080 pour voir l'interface d'enregistrement des présences des employés.
5. Après avoir sélectionné un employé, la page appellera l'API backend en fonction de l'identifiant de l'employé pour obtenir l'enregistrement de pointage de l'employé et l'afficher dans le tableau.

Grâce aux étapes de développement ci-dessus, nous avons mis en œuvre avec succès un système de requête d'enregistrement de pointage de présence des employés en ligne développé à l'aide de PHP et Vue. Les utilisateurs peuvent consulter leurs enregistrements de présence en sélectionnant des employés, ce qui améliore non seulement l'efficacité de la gestion des présences, mais réduit également l'apparition d'erreurs humaines. Dans le même temps, ce projet nous montre également les étapes de base et les points techniques pour combiner PHP et Vue pour un développement full-stack. J'espère que cet article vous sera utile et je vous souhaite bonne chance dans votre programmation !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!