أهداف التعلم

• أن تصمم واجهة صفحة إدخال مصطلح.
• أن تكتب كود PHP لتضمين صفحتي Header وConnection.
• أن تنشئ صفحة إدخال مصطلح تحفظ بياناته في جدول terms.
• أن تتحقق من إدخال جميع الحقول، وترفع صورة المصطلح بأمان.
• أن تتحقق من إضافة المصطلح إلى قاعدة البيانات.

شرح الدرس

أولًا: تصميم واجهة صفحة إدخال مصطلح

نصمم الصفحة في برنامج Expression Web (نمط التصميم Design) أو بكود HTML مباشرة، ونحفظها في مجلد الموقع باسم add_term.php:

• عنوان الشاشة «إدخال مصطلح» في مقطع مستقل <div>.
• نموذج (Form) من صندوق الأدوات (Toolbox)، يضم عناصر التحكم: مربع نص للمصطلح، ومربع نص للترجمة، ومربع نص متعدد الأسطر (TextArea) للتعريف العلمي، وعنصر لاختيار ملف الصورة، وزر «إضافة».
• النموذج (Form) يمرر بيانات عناصر التحكم من مستعرض الويب إلى الخادم.

<form method="post" action="add_term.php" enctype="multipart/form-data">
  المصطلح: <input type="text" name="txt_term"><br>
  الترجمة: <input type="text" name="trans"><br>
  التعريف: <textarea name="TextArea1"></textarea><br>
  الصورة: <input type="file" name="File1"><br>
  <input type="submit" name="Submit1" value="إضافة">
</form>

الفرق بين POST وGET:

ثانيًا: كود PHP المختصر (كما في الكتاب)

<?php
include("header.php");
include("connection.php");
if (isset($_POST['Submit1'])) {
    $term  = $_POST['txt_term'];
    $trans = $_POST['trans'];
    $defe  = $_POST['TextArea1'];
    @$file = $_FILES['File1']['name'];
    @$tmp  = $_FILES['File1']['tmp_name'];
    move_uploaded_file($tmp, "pic/" . $file);
    $picture = "pic/" . $file;
    $sql = mysqli_query($connect,
        "INSERT INTO terms VALUES ('', '$term', '$trans', '$defe', '$picture')");
}
?>

(في الكتاب تُستخدم الدالة القديمة mysql_query، وقد حُذفت من PHP بدءًا من الإصدار 7، فنستخدم mysqli_query المكافئة.)

أوجه القصور في الكود المختصر:

1. لا يتأكد من وجود المجلد pic قبل نقل الصورة إليه.
2. لا يتحقق من إدخال جميع الحقول قبل الحفظ.
3. لا تظهر رسالة تفيد نجاح الإضافة أو فشلها.
4. قد تظهر الحروف العربية في قاعدة البيانات في صورة علامات استفهام «؟؟؟».

ثالثًا: الكود الأكثر احترافية

<?php
include("header.php");
include("connection.php");
mysqli_set_charset($connect, "utf8");   // لإظهار الحروف العربية بشكل صحيح
if (isset($_POST['Submit1'])) {
    if (!file_exists("pic")) {            // إنشاء مجلد الصور إذا لم يكن موجودًا
        mkdir("pic");
    }
    $term  = trim($_POST['txt_term']);
    $trans = trim($_POST['trans']);
    $defe  = trim($_POST['TextArea1']);
    $picture = "";
    if ($term != "" && $trans != "" && $defe != "") {
        // ... رفع الصورة (انظر الفقرة التالية) ...
        $stmt = mysqli_prepare($connect,
            "INSERT INTO terms (term, trans, defe, picture) VALUES (?, ?, ?, ?)");
        mysqli_stmt_bind_param($stmt, "ssss", $term, $trans, $defe, $picture);
        if (mysqli_stmt_execute($stmt)) {
            echo "تم إضافة البيانات بنجاح";
        }
    } else {
        echo "البيانات التي تم إدخالها غير صحيحة يجب إدخال جميع الحقول";
    }
}
?>

• file_exists وmkdir: جملة شرطية تختبر وجود المجلد pic وتنشئه إذا لم يكن موجودًا.
• الشرط $term != "" && $trans != "" && $defe != "" يتأكد أن جميع المتغيرات ليست خالية؛ فإن تحقق تُحفظ البيانات، وإلا تظهر رسالة الخطأ.
• mysqli_set_charset تساعد على ظهور البيانات العربية بشكل صحيح بدل علامات الاستفهام.
• الاستعلام المُعد prepare مع bind_param يمرر القيم منفصلة عن أمر SQL، فيحمي من هجمات حقن SQL. والرمز "ssss" يعني أن القيم الأربع نصوص (string).

رفع الصورة بأمان (إثراء):

if (!empty($_FILES["File1"]["name"])) {
    $allowed = ["image/png" => "png", "image/jpeg" => "jpg"];
    $type = mime_content_type($_FILES["File1"]["tmp_name"]);
    if (!isset($allowed[$type])) {
        echo "نوع الصورة غير مسموح";
    } elseif ($_FILES["File1"]["size"] > 500000) {
        echo "حجم الصورة أكبر من 500 كيلوبايت";
    } else {
        $picture = "pic/" . uniqid("term_") . "." . $allowed[$type];
        move_uploaded_file($_FILES["File1"]["tmp_name"], $picture);
    }
}

• نتحقق من نوع الملف الفعلي بـ mime_content_type لا من امتداده فقط، لأن الامتداد يمكن تغييره بسهولة.
• نحدد حجمًا أقصى للصورة (500 كيلوبايت هنا)، ونسمح بـ PNG وJPEG فقط.
• نولّد اسمًا جديدًا فريدًا بالدالة uniqid بدل اسم المستخدم، لتجنب تكرار الأسماء والأسماء الضارة.

رابعًا: تنفيذ الصفحة والتأكد من الإضافة

1. نستعرض الصفحة بكتابة localhost/Dictionary/add_term.php في شريط العنوان.
2. إذا ضغطنا «إضافة» دون إدخال البيانات تظهر الرسالة: «البيانات التي تم إدخالها غير صحيحة يجب إدخال جميع الحقول».
3. عند إدخال جميع البيانات والضغط على «إضافة» تظهر الرسالة: «تم إضافة البيانات بنجاح».
4. للتأكد من الإضافة نفتح قاعدة البيانات في تبويب جديد بكتابة localhost/phpmyadmin، ونفتح جدول terms في قاعدة dbdictionary لنرى السجل الجديد.

أسئلة للتدريب

1. اذكر عناصر التحكم في نموذج صفحة إدخال مصطلح.
2. ما وظيفة كل من الخصائص: method وaction وenctype؟
3. قارن بين POST وGET.
4. ما وظيفة isset($_POST['Submit1'])؟ وما وظيفة العلامة @؟
5. اذكر أوجه القصور في الكود المختصر، وكيف عالجها الكود الأكثر احترافية.
6. ما الرسالة التي تظهر عند ترك أحد الحقول فارغًا؟
7. كيف تتأكد من إضافة المصطلح إلى قاعدة البيانات؟
8. اذكر ثلاثة إجراءات لرفع الصور بأمان.