بناء منصة قبول وظائف للمطورين باستخدام PHP

في هذا الدليل، سنتعلم كيفية بناء منصة بسيطة للمطورين تتيح لهم التسجيل، وتسجيل الدخول، وعرض الوظائف المتاحة، وقبولها، ووضع علامة على الوظائف المكتملة باستخدام PHP وMySQL. سنبدأ بشرح هيكلية المشروع، ثم ننتقل إلى إعداد قاعدة البيانات، وأخيرًا بناء واجهة التطبيق خطوة بخطوة.

نظرة عامة على المشروع

سنبني تطبيق ويب بسيط حيث يمكن:

• الموظفين:
  • التسجيل وتسجيل الدخول.
  • عرض المهام المتاحة.
  • قبول المهام التي يرغبون في العمل عليها.
  • وضع علامة على المهام كمكتملة.
• المهام:
  • تُضاف إلى قائمة انتظار المهام.
  • يتم تعيينها إلى الموظفين عند قبولها.

المتطلبات المسبقة

• معرفة أساسية بـ PHP و MySQL.
• بيئة خادم ويب (مثل XAMPP، WAMP، أو LAMP stack).
• تثبيت Composer (لإعداد Tailwind CSS عبر Laravel Mix، اختياري).
• تثبيت Node.js و npm (لـ Tailwind CSS، اختياري).

إعداد المشروع

قم بإنشاء مجلد المشروع باسم task-platform في دليل الجذر لخادم الويب الخاص بك (مثل htdocs لـ XAMPP).

هيكلية المشروع

task-platform/
├── assets/
│   └── css/
├── uploads/
├── db_connect.php
├── register.php
├── login.php
├── logout.php
├── dashboard.php
├── task_details.php
├── accept_task.php
├── complete_task.php
└── (Other PHP files as needed)

الآن بعد أن قمنا بإعداد هيكلية المشروع، سنبدأ بإعداد قاعدة البيانات.

1. إعداد قاعدة البيانات

أولاً، سنقوم بإنشاء قاعدة بيانات جديدة باستخدام MySQL. قم بتسجيل الدخول إلى نظام إدارة قواعد البيانات الخاص بك (مثل phpMyAdmin) وأنشئ قاعدة بيانات جديدة باسم “task_platform”.

إنشاء جدول الموظفين (Employees)

جدول “employees” سيحتوي على معلومات الموظفين المسجلين، مثل الاسم، والبريد الإلكتروني، وكلمة المرور. استخدم الكود التالي لإنشاء هذا الجدول:

CREATE TABLE employees (
  id INT(11) NOT NULL AUTO_INCREMENT,
  username VARCHAR(50) NOT NULL,
  email VARCHAR(100) NOT NULL,
  password VARCHAR(255) NOT NULL,
  PRIMARY KEY (id)
);

إنشاء جدول المهام (Tasks)

جدول “tasks” سيحتوي على تفاصيل المهام المتاحة والمقبولة من قبل الموظفين. استخدم الكود التالي لإنشاء هذا الجدول:

CREATE TABLE tasks (
  id INT(11) NOT NULL AUTO_INCREMENT,
  type ENUM('upload', 'register', 'modify') NOT NULL,
  details TEXT,
  status ENUM('pending', 'accepted', 'completed') NOT NULL DEFAULT 'pending',
  assigned_to INT(11),
  created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (id),
  FOREIGN KEY (assigned_to) REFERENCES employees(id) ON DELETE SET NULL
);

بعد إعداد قاعدة البيانات، سنقوم بإنشاء الاتصال بين تطبيق PHP وقاعدة البيانات.

2. إعداد الاتصال بقاعدة البيانات

للاتصال بقاعدة البيانات، سنقوم بإنشاء ملف يسمى db_connect.php. هذا الملف سيقوم بإنشاء اتصال بين التطبيق وقاعدة البيانات التي أنشأناها سابقًا.

<?php
// db_connect.php

$servername = "localhost";
$username = "your_db_username"; // استبدل هذا باسم مستخدم قاعدة البيانات
$password = "your_db_password"; // استبدل هذا بكلمة مرور قاعدة البيانات
$dbname = "task_platform";

$conn = new mysqli($servername, $username, $password, $dbname);

// التحقق من الاتصال
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
?>

استبدل your_db_username وyour_db_password ببيانات الاعتماد الخاصة بقاعدة البيانات. سيقوم هذا الملف بإنشاء اتصال بالقاعدة لاستخدامه في الصفحات المختلفة.

3. إنشاء صفحة التسجيل

الصفحة register.php تتيح للموظفين إنشاء حساب جديد. سنقوم بإعداد النموذج ومعالجة البيانات المدخلة من المستخدم.

<?php
// register.php

session_start();
include 'db_connect.php';

// التحقق مما إذا كان المستخدم مسجل الدخول بالفعل
if (isset($_SESSION['employee_id'])) {
    header('Location: dashboard.php');
    exit();
}

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // معالجة بيانات التسجيل

    // تنظيف المدخلات
    $username = htmlspecialchars(trim($_POST['username']));
    $email = htmlspecialchars(trim($_POST['email']));
    $password = $_POST['password'];

    // التحقق من وجود البريد الإلكتروني مسبقًا
    $stmt = $conn->prepare("SELECT id FROM employees WHERE email = ?");
    $stmt->bind_param("s", $email);
    $stmt->execute();
    $stmt->store_result();

    if ($stmt->num_rows > 0) {
        $error_message = "البريد الإلكتروني مسجل بالفعل. يرجى استخدام بريد إلكتروني آخر.";
    } else {
        // تشفير كلمة المرور
        $hashed_password = password_hash($password, PASSWORD_DEFAULT);

        // إدراج موظف جديد
        $stmt = $conn->prepare("INSERT INTO employees (username, email, password) VALUES (?, ?, ?)");
        $stmt->bind_param("sss", $username, $email, $hashed_password);

        if ($stmt->execute()) {
            // إعادة التوجيه إلى صفحة تسجيل الدخول
            header("Location: login.php");
            exit();
        } else {
            $error_message = "خطأ: " . $stmt->error;
        }
    }
}
?>
<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>تسجيل الموظفين</title>
    <!-- Tailwind CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
    <div class="w-full max-w-md">
        <?php if (isset($error_message)): ?>
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                <?php echo $error_message; ?>
            </div>
        <?php endif; ?>
        <form action="register.php" method="POST" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
            <h2 class="text-2xl font-bold mb-6 text-center">تسجيل</h2>
            <div class="mb-4">
                <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
                    اسم المستخدم
                </label>
                <input name="username" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="اسم المستخدم" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 text-sm font-bold mb-2" for="email">
                    البريد الإلكتروني
                </label>
                <input name="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="email" type="email" placeholder="البريد الإلكتروني" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
                    كلمة المرور
                </label>
                <input name="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="كلمة المرور" required>
            </div>
            <div class="flex items-center justify-between">
                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
                    تسجيل
                </button>
                <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="login.php">
                    لديك حساب بالفعل؟
                </a>
            </div>
        </form>
    </div>
</body>
</html>

4. إنشاء صفحة تسجيل الدخول

الصفحة login.php ستسمح للموظفين بتسجيل الدخول إلى حساباتهم.

<?php
// login.php

session_start();
include 'db_connect.php';

// التحقق مما إذا كان المستخدم مسجل الدخول بالفعل
if (isset($_SESSION['employee_id'])) {
    header('Location: dashboard.php');
    exit();
}

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // معالجة بيانات تسجيل الدخول

    $email = htmlspecialchars(trim($_POST['email']));
    $password = $_POST['password'];

    $stmt = $conn->prepare("SELECT id, password FROM employees WHERE email = ?");
    $stmt->bind_param("s", $email);
    $stmt->execute();
    $stmt->bind_result($employee_id, $hashed_password);
    $stmt->fetch();

    if ($employee_id && password_verify($password, $hashed_password)) {
        // إعداد متغيرات الجلسة
        $_SESSION['employee_id'] = $employee_id;

        // إعادة التوجيه إلى لوحة التحكم
        header("Location: dashboard.php");
        exit();
    } else {
        $error_message = "البريد الإلكتروني أو كلمة المرور غير صحيحة.";
    }
}
?>
<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>تسجيل الدخول للموظفين</title>
    <!-- Tailwind CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
    <div class="w-full max-w-md">
        <?php if (isset($error_message)): ?>
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                <?php echo $error_message; ?>
            </div>
        <?php endif; ?>
        <form action="login.php" method="POST" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
            <h2 class="text-2xl font-bold mb-6 text-center">تسجيل الدخول</h2>
            <div class="mb-4">
                <label class="block text-gray-700 text-sm font-bold mb-2" for="email">
                    البريد الإلكتروني
                </label>
                <input name="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="email" type="email" placeholder="البريد الإلكتروني" required>
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
                    كلمة المرور
                </label>
                <input name="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="كلمة المرور" required>
            </div>
            <div class="flex items-center justify-between">
                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
                    تسجيل الدخول
                </button>
                <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="register.php">
                    إنشاء حساب جديد
                </a>
            </div>
        </form>
    </div>
</body>
</html>

5. التعامل مع تسجيل الخروج

لإنشاء وظيفة تسجيل الخروج، سنقوم بإنشاء ملف logout.php الذي سيقوم بتدمير الجلسة وإنهاء تسجيل دخول المستخدم.

<?php
// logout.php

session_start();
session_destroy();
header('Location: login.php');
exit();
?>

6. إنشاء لوحة التحكم

بعد تسجيل الدخول، يتم توجيه المستخدم إلى لوحة التحكم dashboard.php حيث يمكنه عرض وقبول المهام المتاحة.

<?php
// dashboard.php

session_start();
if (!isset($_SESSION['employee_id'])) {
    header('Location: login.php');
    exit();
}

include 'db_connect.php';

$employee_id = $_SESSION['employee_id'];

// جلب المهام المتاحة
$available_tasks_query = "SELECT * FROM tasks WHERE status = 'pending'";
$available_tasks_result = $conn->query($available_tasks_query);
$available_tasks = $available_tasks_result->fetch_all(MYSQLI_ASSOC);

// جلب المهام التي تم تعيينها للموظف
$my_tasks_query = "SELECT * FROM tasks WHERE assigned_to = ? AND status = 'accepted'";
$stmt = $conn->prepare($my_tasks_query);
$stmt->bind_param("i", $employee_id);
$stmt->execute();
$my_tasks_result = $stmt->get_result();
$my_tasks = $my_tasks_result->fetch_all(MYSQLI_ASSOC);
?>
<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>لوحة تحكم الموظفين</title>
    <!-- Tailwind CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <nav class="bg-white shadow mb-6">
        <div class="container mx-auto px-6 py-3 flex justify-between items-center">
            <a href="#" class="text-xl font-bold text-gray-800">Task Platform</a>
            <div>
                <a href="logout.php" class="text-gray-800 hover:text-blue-500">تسجيل الخروج</a>
            </div>
        </div>
    </nav>

    <div class="container mx-auto px-6">
        <h2 class="text-2xl font-bold mb-4">المهام المتاحة</h2>
        <?php if (count($available_tasks) > 0): ?>
            <table class="min-w-full bg-white">
                <thead class="bg-gray-800 text-white">
                    <tr>
                        <th class="w-1/4 px-4 py-2">معرف المهمة</th>
                        <th class="w-1/4 px-4 py-2">النوع</th>
                        <th class="w-1/2 px-4 py-2">التفاصيل</th>
                        <th class="px-4 py-2">الإجراء</th>
                    </tr>
                </thead>
                <tbody class="text-gray-700">
                    <?php foreach ($available_tasks as $task): ?>
                        <tr>
                            <td class="border px-4 py-2"><?php echo $task['id']; ?></td>
                            <td class="border px-4 py-2"><?php echo ucfirst($task['type']); ?></td>
                            <td class="border px-4 py-2"><?php echo substr($task['details'], 0, 50); ?>...</td>
                            <td class="border px-4 py-2">
                                <form action="accept_task.php" method="POST">
                                    <input type="hidden" name="task_id" value="<?php echo $task['id']; ?>">
                                    <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded">قبول</button>
                                </form>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        <?php else: ?>
            <p>لا توجد مهام متاحة في الوقت الحالي.</p>
        <?php endif; ?>

        <h2 class="text-2xl font-bold mt-8 mb-4">مهامي</h2>
        <?php if (count($my_tasks) > 0): ?>
            <table class="min-w-full bg-white">
                <thead class="bg-gray-800 text-white">
                    <tr>
                        <th class="w-1/4 px-4 py-2">معرف المهمة</th>
                        <th class="w-1/4 px-4 py-2">النوع</th>
                        <th class="w-1/2 px-4 py-2">التفاصيل</th>
                        <th class="px-4 py-2">الإجراء</th>
                    </tr>
                </thead>
                <tbody class="text-gray-700">
                    <?php foreach ($my_tasks as $task): ?>
                        <tr>
                            <td class="border px-4 py-2"><?php echo $task['id']; ?></td>
                            <td class="border px-4 py-2"><?php echo ucfirst($task['type']); ?></td>
                            <td class="border px-4 py-2"><?php echo substr($task['details'], 0, 50); ?>...</td>
                            <td class="border px-4 py-2">
                                <a href="task_details.php?task_id=<?php echo $task['id']; ?>" class="bg-green-500 text-white px-4 py-2 rounded">عرض</a>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        <?php else: ?>
            <p>ليس لديك مهام مقبولة.</p>
        <?php endif; ?>
    </div>
</body>
</html>

7. عرض تفاصيل المهمة

الصفحة task_details.php تعرض تفاصيل المهمة التي تم قبولها من قبل الموظف.

<?php
// task_details.php

session_start();
if (!isset($_SESSION['employee_id'])) {
    header('Location: login.php');
    exit();
}

include 'db_connect.php';

$employee_id = $_SESSION['employee_id'];
$task_id = $_GET['task_id'];

// جلب تفاصيل المهمة
$stmt = $conn->prepare("SELECT * FROM tasks WHERE id = ? AND assigned_to = ?");
$stmt->bind_param("ii", $task_id, $employee_id);
$stmt->execute();
$result = $stmt->get_result();
$task = $result->fetch_assoc();

if (!$task) {
    echo "المهمة غير موجودة أو أنك غير معين لهذه المهمة.";
    exit();
}
?>
<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>تفاصيل المهمة</title>
    <!-- Tailwind CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <nav class="bg-white shadow mb-6">
        <div class="container mx-auto px-6 py-3 flex justify-between items-center">
            <a href="dashboard.php" class="text-xl font-bold text-gray-800">العودة إلى لوحة التحكم</a>
        </div>
    </nav>

    <div class="container mx-auto px-6">
        <h2 class="text-2xl font-bold mb-4">تفاصيل المهمة #<?php echo $task['id']; ?></h2>
        <div class="bg-white p-6 rounded shadow">
            <p><strong>النوع:</strong> <?php echo ucfirst($task['type']); ?></p>
            <p><strong>التفاصيل:</strong></p>
            <p><?php echo nl2br($task['details']); ?></p>

            <!-- خيار وضع علامة على المهمة كمكتملة -->
            <form action="complete_task.php" method="POST" class="mt-6">
                <input type="hidden" name="task_id" value="<?php echo $task['id']; ?>">
                <button type="submit" class="bg-blue-500 text-white px-6 py-2 rounded">وضع علامة كمكتملة</button>
            </form>
        </div>
    </div>
</body>
</html>

8. قبول المهمة

الملف accept_task.php يعالج عملية قبول المهمة عندما يقوم الموظف بالنقر على زر “قبول”.

<?php
// accept_task.php

session_start();
include 'db_connect.php';

if (!isset($_SESSION['employee_id'])) {
    header('Location: login.php');
    exit();
}

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $task_id = $_POST['task_id'];
    $employee_id = $_SESSION['employee_id'];

    // بدء المعاملة
    $conn->begin_transaction();

    // التحقق من حالة المهمة
    $stmt = $conn->prepare("SELECT status FROM tasks WHERE id = ? FOR UPDATE");
    $stmt->bind_param("i", $task_id);
    $stmt->execute();
    $stmt->bind_result($status);
    $stmt->fetch();
    $stmt->close();

    if ($status == 'pending') {
        // تحديث حالة المهمة إلى مقبولة
        $update_stmt = $conn->prepare("UPDATE tasks SET status = 'accepted', assigned_to = ? WHERE id = ?");
        $update_stmt->bind_param("ii", $employee_id, $task_id);
        $update_stmt->execute();

        $conn->commit();
        header("Location: dashboard.php");
        exit();
    } else {
        $conn->rollback();
        echo "عذرًا، لقد تم قبول هذه المهمة بالفعل من قبل موظف آخر.";
    }
}
?>

9. إكمال المهمة

الملف complete_task.php يعالج وضع علامة على المهمة كمكتملة عندما يقوم الموظف بذلك.

<?php
// complete_task.php

session_start();
include 'db_connect.php';

if (!isset($_SESSION['employee_id'])) {
    header('Location: login.php');
    exit();
}

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $task_id = $_POST['task_id'];
    $employee_id = $_SESSION['employee_id'];

    // التأكد من أن المهمة معينة للموظف
    $stmt = $conn->prepare("SELECT status FROM tasks WHERE id = ? AND assigned_to = ?");
    $stmt->bind_param("ii", $task_id, $employee_id);
    $stmt->execute();
    $stmt->bind_result($status);
    $stmt->fetch();
    $stmt->close();

    if ($status == 'accepted') {
        // تحديث حالة المهمة إلى مكتملة
        $update_stmt = $conn->prepare("UPDATE tasks SET status = 'completed' WHERE id = ?");
        $update_stmt->bind_param("i", $task_id);
        $update_stmt->execute();

        header("Location: dashboard.php");
        exit();
    } else {
        echo "غير قادر على إكمال المهمة. يرجى التحقق مما إذا كنت معينًا لهذه المهمة.";
    }
}
?>

10. اختبار التطبيق

• قم بإنشاء قاعدة بيانات جديدة باسم task_platform.
• قم بتنفيذ أوامر SQL لإنشاء جداول employees وtasks.
• افتح register.php في متصفحك لإنشاء حساب موظف جديد.
• قم بتسجيل الدخول باستخدام login.php.
• يجب أن يتم توجيهك إلى dashboard.php حيث يمكنك رؤية المهام المتاحة.
• اقبل مهمة عبر النقر على زر “قبول”.
• يجب أن تنتقل المهمة إلى قسم “مهامي”.
• عرض تفاصيل المهمة عبر النقر على “عرض”.
• ضع علامة على المهمة كمكتملة.
• يجب أن تختفي المهمة من قسم “مهامي”.

الخلاصة

في هذا الدليل، تعلمنا كيفية بناء منصة بسيطة للموظفين باستخدام PHP وMySQL. يمكن للموظفين التسجيل، تسجيل الدخول، عرض وقبول المهام، ووضع علامة على المهام المكتملة. هذا المشروع يمكن أن يكون نقطة انطلاق رائعة لبناء منصة أكثر تعقيدًا في المستقبل.