Comment utiliser PHP et Vue pour créer une interface de saisie de présence des employés en ligne

Comment utiliser PHP et Vue pour créer une interface de saisie en ligne de la présence des employés

Dans les entreprises modernes, la présence des employés est un problème auquel les managers doivent faire face et résoudre. Avec le développement de la technologie, la présence traditionnelle sur papier a été progressivement remplacée par des systèmes de présence électronique. Construire une interface de saisie en ligne des présences des employés est une méthode très pratique, qui peut aider les gestionnaires à enregistrer les présences des employés et à effectuer des analyses statistiques. Cet article expliquera comment utiliser PHP et Vue pour créer une telle interface de saisie en ligne et donnera des exemples de code spécifiques.

1. Préparation

Assurez-vous d'abord d'avoir correctement installé les environnements d'exploitation PHP et Vue. PHP est un langage de script côté serveur, tandis que Vue est un framework JavaScript populaire qui fournit des outils pour créer des interfaces utilisateur.

2. Créer une base de données

Nous devons d'abord créer une base de données nommée "présence" et y créer une table nommée "employés". Le tableau contiendra les informations de base de l'employé, telles que le numéro d'employé, le nom, etc., ainsi que les données de présence. La structure spécifique de la table est la suivante :

CREATE TABLE employees (
  id INT(11) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
  emp_id INT(11) UNSIGNED,
  name VARCHAR(50),
  attendance_date DATE,
  time_in TIME,
  time_out TIME
);

3. Développement back-end

Nous utilisons PHP pour gérer la logique back-end. Créez d'abord un fichier nommé "index.php" et ajoutez le code suivant :

<?php
 
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
header("Access-Control-Allow-Methods: POST");
header("Access-Control-Max-Age: 3600");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");

$host = "localhost";
$db_name = "attendance";
$username = "root";
$password = "";

$conn = new PDO("mysql:host=".$host.";dbname=".$db_name, $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$data = json_decode(file_get_contents("php://input"));

$emp_id = $data->emp_id;
$name = $data->name;
$attendance_date = $data->attendance_date;
$time_in = $data->time_in;
$time_out = $data->time_out;

$query = "INSERT INTO employees (emp_id, name, attendance_date, time_in, time_out) VALUES (:emp_id, :name, :attendance_date, :time_in, :time_out)";
$stmt = $conn->prepare($query);
$stmt->bindParam(":emp_id", $emp_id);
$stmt->bindParam(":name", $name);
$stmt->bindParam(":attendance_date", $attendance_date);
$stmt->bindParam(":time_in", $time_in);
$stmt->bindParam(":time_out", $time_out);

if($stmt->execute()){
    http_response_code(201);
    echo json_encode(array("message" => "Attendance record was created."));
}
else{
    http_response_code(503);
    echo json_encode(array("message" => "Unable to create attendance record."));
}
?>

Le code ci-dessus définit d'abord l'en-tête de réponse pour autoriser les requêtes inter-domaines. Connectez-vous ensuite à la base de données, analysez les données reçues au format JSON et insérez-les dans la table des employés.

4. Développement front-end

Dans la partie front-end, nous utilisons Vue pour construire l'interface utilisateur. Utilisez Vue CLI pour créer rapidement un projet et installer le plug-in axios. Vous pouvez exécuter la commande suivante dans le terminal :

vue create attendance
cd attendance
npm install axios

Ensuite, nous devons modifier le fichier src/App.vue et ajouter le code suivant :

<template>
  <div id="app">
    <h1>员工考勤录入</h1>

    <form @submit.prevent="submit">
      <label for="emp_id">员工编号:</label>
      <input type="text" v-model="emp_id"> <br>

      <label for="name">员工姓名:</label>
      <input type="text" v-model="name"> <br>

      <label for="attendance_date">考勤日期:</label>
      <input type="date" v-model="attendance_date"> <br>

      <label for="time_in">签到时间:</label>
      <input type="time" v-model="time_in"> <br>

      <label for="time_out">签退时间:</label>
      <input type="time" v-model="time_out"> <br>

      <button type="submit">提交</button>
    </form>

    <p v-if="message">{{ message }}</p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'App',
  data() {
    return {
      emp_id: '',
      name: '',
      attendance_date: '',
      time_in: '',
      time_out: '',
      message: ''
    }
  },
  methods: {
    submit() {
      axios.post('http://localhost/index.php', {
        emp_id: this.emp_id,
        name: this.name,
        attendance_date: this.attendance_date,
        time_in: this.time_in,
        time_out: this.time_out
      })
        .then(response => {
          this.message = response.data.message
        })
        .catch(error => {
          this.message = error.response.data.message
        })
    }
  }
}
</script>

<style>
#app {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  margin-top: 60px;
}
</style>

. Le code ci-dessus crée un formulaire simple, comprenant des champs tels que le numéro d'employé, le nom, la date de présence, l'heure d'arrivée et l'heure de départ. Lorsque vous cliquez sur le bouton de soumission, une requête POST sera envoyée au fichier index.php sur le backend via axios. Après avoir reçu la réponse, les informations d'invite correspondantes seront affichées sur l'interface.

5. Exécutez et testez

Exécutez la commande suivante dans le terminal pour démarrer la page front-end :

npm run serve

En même temps, vous devez placer le fichier back-end index.php dans le répertoire racine du Serveur Apache ou Nginx. Assurez-vous d'avoir démarré le serveur Web et le serveur MySQL.

En visitant http://localhost:8080, vous devriez pouvoir voir une interface simple de saisie des présences. Après avoir rempli le formulaire et cliqué sur Soumettre, les relevés de présence correspondants seront enregistrés dans la base de données.

Résumé

Cet article explique comment utiliser PHP et Vue pour créer une interface de saisie des présences des employés en ligne. Nous avons créé un tableau contenant des informations de base sur les employés et des données de présence, utilisé PHP pour gérer la logique back-end et utilisé Vue pour créer l'interface utilisateur. Grâce à cette interface, les responsables peuvent facilement saisir les relevés de présence des employés. J'espère que cet exemple pourra aider les lecteurs à mieux comprendre comment utiliser PHP et Vue pour le développement Web.

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!