أساسيات PHP

نماذج HTML و PHP

13 دقيقة الدرس 17 من 45

نماذج HTML و PHP

النماذج هي الطريقة الأساسية التي يتفاعل بها المستخدمون مع تطبيقات الويب. تجعل PHP من السهل معالجة بيانات النماذج وإنشاء تجارب ديناميكية وتفاعلية.

بنية النموذج الأساسية

تستخدم نماذج HTML عنصر <form> مع سمتين مهمتين:

method: تحدد كيفية إرسال البيانات (GET أو POST)
action: تحدد إلى أين يتم إرسال البيانات (ملف PHP)

<!-- نموذج أساسي -->
<form method="post" action="process.php">
    <label for="name">الاسم:</label>
    <input type="text" id="name" name="name">

    <label for="email">البريد الإلكتروني:</label>
    <input type="email" id="email" name="email">

    <button type="submit">إرسال</button>
</form>

مهم: سمة name حاسمة. تصبح المفتاح في مصفوفة $_POST أو $_GET. بدونها، لا يمكن لـ PHP الوصول إلى بيانات الحقل.

طرق GET مقابل POST

طريقة GET

<!-- نموذج GET -->
<form method="get" action="search.php">
    <input type="text" name="query" placeholder="بحث...">
    <button type="submit">بحث</button>
</form>

خصائص GET:

تظهر البيانات في الرابط: search.php?query=php
حجم بيانات محدود (حد طول الرابط)
البيانات مرئية ويمكن إضافتها للإشارات المرجعية
جيدة لعمليات البحث والمرشحات
غير آمنة للبيانات الحساسة

طريقة POST

<!-- نموذج POST -->
<form method="post" action="register.php">
    <input type="text" name="username">
    <input type="password" name="password">
    <button type="submit">تسجيل</button>
</form>

خصائص POST:

البيانات مرسلة في جسم الطلب (غير مرئية في الرابط)
لا يوجد حد لحجم البيانات
أكثر أمانًا للمعلومات الحساسة
جيدة للنماذج وتسجيل الدخول والتسجيل
لا يمكن إضافتها للإشارات المرجعية

قاعدة عامة: استخدم GET لاسترداد البيانات (بحث، مرشحات) و POST لإنشاء/تحديث البيانات (تسجيل دخول، تسجيل، نماذج).

معالجة بيانات النموذج

<?php
// contact.php - معالجة النموذج
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // تم إرسال النموذج
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];

    echo "شكرًا لك، $name!";
    echo "لقد استلمنا رسالتك.";
} else {
    // عرض النموذج
    ?>
    <form method="post" action="">
        <input type="text" name="name" required>
        <input type="email" name="email" required>
        <textarea name="message" required></textarea>
        <button type="submit">إرسال</button>
    </form>
    <?php
}
?>

أنواع حقول النموذج

<!-- مدخلات النص -->
<input type="text" name="username">
<input type="email" name="email">
<input type="password" name="password">
<input type="number" name="age">
<input type="tel" name="phone">
<input type="url" name="website">
<input type="date" name="birthday">

<!-- منطقة النص -->
<textarea name="message" rows="5"></textarea>

<!-- أزرار الاختيار -->
<input type="radio" name="gender" value="male"> ذكر
<input type="radio" name="gender" value="female"> أنثى

<!-- صناديق الاختيار -->
<input type="checkbox" name="terms" value="1"> الموافقة على الشروط
<input type="checkbox" name="newsletter" value="1"> الاشتراك

<!-- قائمة منسدلة -->
<select name="country">
    <option value="us">الولايات المتحدة</option>
    <option value="uk">المملكة المتحدة</option>
    <option value="ca">كندا</option>
</select>

<!-- اختيار متعدد -->
<select name="skills[]" multiple>
    <option value="php">PHP</option>
    <option value="js">JavaScript</option>
    <option value="python">Python</option>
</select>

معالجة أنواع المدخلات المختلفة

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // مدخلات النص
    $username = $_POST['username'];
    $email = $_POST['email'];

    // زر الاختيار (قيمة واحدة)
    $gender = $_POST['gender'];  // "male" أو "female"

    // صندوق الاختيار (التحقق من التحديد)
    $terms = isset($_POST['terms']) ? true : false;
    $newsletter = isset($_POST['newsletter']) ? true : false;

    // القائمة المنسدلة
    $country = $_POST['country'];

    // اختيار متعدد (مصفوفة)
    $skills = isset($_POST['skills']) ? $_POST['skills'] : [];

    // عرض المهارات المحددة
    if (!empty($skills)) {
        foreach ($skills as $skill) {
            echo "المهارة: $skill<br>";
        }
    }
}
?>

تحذير صناديق الاختيار: صناديق الاختيار غير المحددة لا يتم إرسالها في بيانات النموذج. استخدم دائمًا isset() للتحقق من تحديد صندوق الاختيار.

مثال كامل لنموذج التسجيل

<?php
// register.php
$errors = [];
$success = false;

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // الحصول على بيانات النموذج
    $username = trim($_POST['username']);
    $email = trim($_POST['email']);
    $password = $_POST['password'];
    $confirm_password = $_POST['confirm_password'];
    $age = intval($_POST['age']);
    $gender = $_POST['gender'];
    $terms = isset($_POST['terms']);

    // التحقق الأساسي
    if (empty($username)) {
        $errors[] = "اسم المستخدم مطلوب";
    }

    if (empty($email) || !filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $errors[] = "البريد الإلكتروني الصحيح مطلوب";
    }

    if (strlen($password) < 6) {
        $errors[] = "يجب أن تكون كلمة المرور 6 أحرف على الأقل";
    }

    if ($password !== $confirm_password) {
        $errors[] = "كلمات المرور غير متطابقة";
    }

    if ($age < 18) {
        $errors[] = "يجب أن يكون عمرك 18 عامًا أو أكثر";
    }

    if (!$terms) {
        $errors[] = "يجب الموافقة على الشروط";
    }

    // إذا لم توجد أخطاء، معالجة التسجيل
    if (empty($errors)) {
        // تشفير كلمة المرور
        $hashed_password = password_hash($password, PASSWORD_DEFAULT);

        // في التطبيق الحقيقي: الحفظ في قاعدة البيانات
        // الآن، فقط أظهر النجاح
        $success = true;
    }
}
?>

<!DOCTYPE html>
<html>
<head>
    <title>تسجيل المستخدم</title>
    <style>
        .error { color: red; }
        .success { color: green; }
        .form-group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; }
        input, select { padding: 5px; width: 300px; }
    </style>
</head>
<body>
    <h1>تسجيل المستخدم</h1>

    <?php if ($success): ?>
        <div class="success">
            <h2>تم التسجيل بنجاح!</h2>
            <p>مرحبًا، <?php echo htmlspecialchars($username); ?>!</p>
        </div>
    <?php else: ?>

        <?php if (!empty($errors)): ?>
            <div class="error">
                <h3>يرجى إصلاح الأخطاء التالية:</h3>
                <ul>
                    <?php foreach ($errors as $error): ?>
                        <li><?php echo $error; ?></li>
                    <?php endforeach; ?>
                </ul>
            </div>
        <?php endif; ?>

        <form method="post" action="">
            <div class="form-group">
                <label for="username">اسم المستخدم:</label>
                <input type="text" id="username" name="username"
                       value="<?php echo isset($username) ? htmlspecialchars($username) : ''; ?>" required>
            </div>

            <div class="form-group">
                <label for="email">البريد الإلكتروني:</label>
                <input type="email" id="email" name="email"
                       value="<?php echo isset($email) ? htmlspecialchars($email) : ''; ?>" required>
            </div>

            <div class="form-group">
                <label for="password">كلمة المرور:</label>
                <input type="password" id="password" name="password" required>
            </div>

            <div class="form-group">
                <label for="confirm_password">تأكيد كلمة المرور:</label>
                <input type="password" id="confirm_password" name="confirm_password" required>
            </div>

            <div class="form-group">
                <label for="age">العمر:</label>
                <input type="number" id="age" name="age" min="1" max="120"
                       value="<?php echo isset($age) ? $age : ''; ?>" required>
            </div>

            <div class="form-group">
                <label>الجنس:</label>
                <input type="radio" name="gender" value="male"
                       <?php echo (isset($gender) && $gender === 'male') ? 'checked' : ''; ?>> ذكر
                <input type="radio" name="gender" value="female"
                       <?php echo (isset($gender) && $gender === 'female') ? 'checked' : ''; ?>> أنثى
            </div>

            <div class="form-group">
                <input type="checkbox" id="terms" name="terms" value="1">
                <label for="terms" style="display: inline;">أوافق على الشروط والأحكام</label>
            </div>

            <button type="submit">تسجيل</button>
        </form>

    <?php endif; ?>
</body>
</html>

الحفاظ على قيم النموذج

عندما يفشل التحقق، احتفظ بإدخال المستخدم حتى لا يضطروا لإعادة الكتابة:

<!-- مدخل نص مع القيمة المحفوظة -->
<input type="text" name="username"
       value="<?php echo isset($_POST['username']) ? htmlspecialchars($_POST['username']) : ''; ?>">

<!-- زر اختيار مع الاختيار المحفوظ -->
<input type="radio" name="gender" value="male"
       <?php echo (isset($_POST['gender']) && $_POST['gender'] === 'male') ? 'checked' : ''; ?>>

<!-- صندوق اختيار مع الحالة المحفوظة -->
<input type="checkbox" name="newsletter"
       <?php echo isset($_POST['newsletter']) ? 'checked' : ''; ?>>

<!-- قائمة منسدلة مع الاختيار المحفوظ -->
<select name="country">
    <option value="us" <?php echo (isset($_POST['country']) && $_POST['country'] === 'us') ? 'selected' : ''; ?>>الولايات المتحدة</option>
    <option value="uk" <?php echo (isset($_POST['country']) && $_POST['country'] === 'uk') ? 'selected' : ''; ?>>المملكة المتحدة</option>
</select>

إعادة التوجيه بعد معالجة النموذج

منع إعادة إرسال النموذج بإعادة التوجيه بعد المعالجة الناجحة (نمط PRG - Post/Redirect/Get):

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // معالجة النموذج...

    if ($success) {
        // إعادة التوجيه إلى صفحة النجاح
        header('Location: success.php?name=' . urlencode($username));
        exit;
    }
}
?>

فوائد نمط PRG:

يمنع إرسالات النماذج المكررة عند تحديث الصفحة
يوفر تجربة مستخدم أفضل
يجعل الروابط قابلة للمشاركة والإضافة للإشارات المرجعية
استدعِ دائمًا exit بعد إعادة التوجيه بـ header()

أفضل ممارسات الأمان

<?php
// 1. تحقق دائمًا من طريقة الطلب
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // معالجة النموذج
}

// 2. تنظيف الإخراج (منع XSS)
$name = htmlspecialchars($_POST['name'], ENT_QUOTES, 'UTF-8');

// 3. التحقق من البريد الإلكتروني
$email = filter_var($_POST['email'], FILTER_VALIDATE_EMAIL);

// 4. إزالة المسافات البيضاء
$username = trim($_POST['username']);

// 5. تحويل الأرقام
$age = intval($_POST['age']);

// 6. التحقق من وجود الحقل
if (isset($_POST['field_name'])) {
    // استخدام الحقل
}

// 7. تشفير كلمات المرور
$hashed = password_hash($_POST['password'], PASSWORD_DEFAULT);
?>

تمرين تطبيقي

المهمة: أنشئ نموذج طلب وظيفة يحتوي على:

الاسم الكامل (مدخل نص)
البريد الإلكتروني (مدخل بريد إلكتروني)
الهاتف (مدخل هاتف)
الوظيفة المتقدم لها (قائمة منسدلة بـ 3 خيارات)
مستوى الخبرة (أزرار اختيار: مبتدئ، متوسط، متقدم)
المهارات (صناديق اختيار متعددة: PHP، JavaScript، SQL، HTML، CSS)
خطاب التقديم (منطقة نص)
الموافقة على سياسة الخصوصية (صندوق اختيار، مطلوب)

المتطلبات:

التحقق من جميع الحقول
الحفاظ على قيم النموذج عند أخطاء التحقق
عرض رسالة نجاح مع معلومات المتقدم
استخدام أنواع مدخلات HTML5 الصحيحة

الملخص

في هذا الدرس، تعلمت:

كيفية إنشاء نماذج HTML ومعالجتها باستخدام PHP
الفروق بين طرق GET و POST
كيفية التعامل مع أنواع المدخلات المختلفة (نص، اختيار، صندوق اختيار، قائمة)
معالجة المصفوفات من الاختيارات المتعددة وصناديق الاختيار
الحفاظ على قيم النموذج بعد أخطاء التحقق
نمط Post/Redirect/Get (PRG)
أفضل ممارسات الأمان للتعامل مع النماذج
تطبيق نموذج تسجيل كامل

بعد ذلك، سنغوص أعمق في تقنيات التحقق من النماذج!