بسم الله الرحمن الرحيم، اللهم صلي وسلم وبارك على نبينا محمد
النهاردة يا صديقي العزيز جايلك بمعلومات قيمة أوي بإذن الله تعالى تفيدك ❤
هتتعلم بإذن الله الواحد الأحد ازاي تعمل بلاجين ووردبريس من الصفر مهمتها انك يكون عندك واجهتين:
- واجهة إدخال البيانات (مثال بيانات عملاء أو أشخاص).
- واجهة البحث داخل هذه البيانات وعرضها في هيئة جدول.
الصورتين دول بيوضحوا الشكل النهائي اللي هتكون عليه البلاجين بعد الانتهاء منها
يالا بينا نبدأ في الخطوات العملية، أول حاجة لازم لما نعملها لما نفكر في برمجة أي بلاجين هو التخطيط، بمعنى انك لازم تفكر بورقة وقلم محتاج تعمل ايه بالظبط، باختصار لو كتبناها في خطوات هنلاقي اننا محتاجين الآتي:
- عمل وتجهيز جدول جديد في الداتابيز لإضافة الداتا بداخله.
- عمل فورم خاص لإضافة البيانات في الداتابيز.
- إدراج الفورم السابق في صفحة جديدة وليكن اسمها Add Data أو إضافة البيانات.
- حفظ البيانات المرسلة من الفورم السابق في الداتابيز.
- عمل فورم آخر للبحث عن البيانات التي تم تسجيلها من الفورم السابق في الداتابيز.
- إدراج فورم البحث هذا في صفحة آخرى وليكن اسمها Get Data أو الحصول على البيانات.
بس كده.. معقولة ياباشمهندس بالسهولة دي كده بلاجين في 6 خطوات بس؟! 😅 اه والله معقولة زي ما بقولك كده 👌
ودي صورة بتوضح التخطيط بيتم ازاي على برامج تخطيط زي Draw.io
طيب بسم الله نبدأ حيز التنفيذ..
أولا قبل تنفيذ ال6 خطوات الخاصين بكتابة الكود محتاجين نجهز بيئة عمل برمجة البلاجين زي ما شرحتها في بوست تاني هنا "إنشاء بلاجين بسيطة للووردبريس" وهي باختصار انك هتعمل فولدر جديد فاضي بأسم البلاجين.. أنا هسميها simple-form انت تقدر تسميها زي مانت عايز. عموما عملنا فولدر بالاسم هنسحبه على Visual Studio Code وهنعمل داخله ملف جديد فارغ اسمه نفس اسم الفولدر ولكن ينتهي ب .php يعني هيكون اسمه بالظبط simple-form.php ونبدأ نحط بداخله الكود المعتاد لإنشاء أي بلاجين جديدة وهو اسم البلاجين واسم مؤلف البلاجين والوصف والاصدار وغيره كما ذكرته سابقا في البوست الآخر.. هيكون الكود في الملف بالشكل ده
<?php
/**
* Plugin Name: Simple Form
* Plugin URI: https://ulayers.com
* Description: A simple form plugin that allows users to submit their name and phone number. Data is saved to a custom table and can be searched via a shortcode.
* Version: 1.0.0
* Author: Mohamed Ali
* Author URI: https://ulayers.com
* License: GPL-2.0+
* License URI: http://www.gnu.org/licenses/gpl-2.0.txt
*/
وطبعا مننساش اهم كود في البلاجين كله هو منع اي شخص من الوصول لملف البلاجين من الurl مباشرة وده كود بسيط يتم وضعه في الملف الرئيسي لأي بلاجين هتبرمجها في حياتك.. تفضل الكود
if (! defined('ABSPATH')) {
exit;
}
طيب خلصنا من تهيئة بيئة العمل كده بسم الله نبدأ في ال6 خطوات بتوع البلاجين:
1. عمل وتجهيز جدول جديد في الداتابيز لإضافة الداتا بداخله.
== علشان تنشىء جدول في الداتابيز محتاج تكون فاهم وبتتعامل بطريقة SQL، طيب أنا ياباشمهندس لسه بتعلم ومعنديش خلفية عن الموضوع ده خالص، بسيطة ياعزيزي تقدر تتعلمها في يوم واحد او يومين بالكتير على الاقل الاساسيات من يوتيوب وبعدها تقدر تستخدم اي ذكاء اصطناعي يساعد في كتابة كود الSQL علشان تنشىء أي جدول في الداتابيز (بس إياك تعمل كده وانت على الاقل معندكش الاساسيات علشان الذكاء الاصطناعي ميضحكش عليك) 😂
اتفضل الفانكشن جاهزة اهي اللي بتعمل الجدول، وبعد ما تبص على الكود هشرحه سريعا
function sf_create_table()
{
global $wpdb;
$table_name = $wpdb->prefix . 'simple_form';
$charset_collate = $wpdb->get_charset_collate();
$sql = "CREATE TABLE $table_name (
id mediumint(9) NOT NULL AUTO_INCREMENT,
name tinytext NOT NULL,
phone varchar(15) NOT NULL,
time datetime DEFAULT CURRENT_TIMESTAMP NOT NULL,
PRIMARY KEY (id)
) $charset_collate;";
require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
dbDelta($sql);
}
register_activation_hook(__FILE__, 'sf_create_table');
اول حاجة عملنا فنكشن اسمها sf_create_table وتقدر تسميها اي حاجة براحتك مش شرط تلتزم بنفس الاسم وبعد كده استخدمنا global $wpdb; ودي اللي بتعملك اتصال بقاعدة بيانات موقعك تلقائيًا.
بعدها بنطلب عمل جدول اسمه simple_form مع اضافة البادئة الخاصة بجداول الداتابيز اللي عندك ديناميكيًا، ثم بنبدأ في عمل الأعمدة الخاصة بالجدول وهي id + name + phone + time وطبعا تقدر تزودهم او تقللهم بناءا على البيانات اللي عايز تجمعها من فورم ادخال البيانات، وبعدها بننفذ استعلام SQL علشان التنفيذ مع مراعاة استخدام dbDelta() ودي مهمتها تعمل تشيك كل اذا كان الجدول موجود بالفعل ولا لاء قبل ما تضيفه، وأخيرا بنشغل الفنكشن دي وقت تفعيل الاضافة كلها، يعني الشخص اللي هيستخدم الاضافة وقت ما بيفعل البلاجين الجدول ده هيتعمل لو مش موجود بالفعل.
2. عمل فورم خاص لإضافة البيانات في الداتابيز. + 3. إدراج الفورم السابق في صفحة جديدة وليكن اسمها Add Data أو إضافة البيانات.
== طيب علشان تعمل فورم لازم طبعا يكون عندك اساسيات html وبرضه بكل بساطة تتعلمه في يوم او يومين بالكتير ويبقى معاك الاساسيات، مع امكانية طلب المساعدة من الذكاء الاصطناعي، اتفضل برضه الكود وبعد كده نناقشة
function sf_form_shortcode()
{
ob_start();
?>
<form action="<?php echo esc_url($_SERVER['REQUEST_URI']); ?>" method="post">
<p>
Name (required) <br>
<input type="text" name="sf-name" value="" required>
</p>
<p>
Phone Number (required) <br>
<input type="tel" name="sf-phone" value="" required>
</p>
<p>
<input type="submit" name="sf-submitted" value="Send">
</p>
</form>
<?php
return ob_get_clean();
}
add_shortcode('simple_form', 'sf_form_shortcode');
هنا يا عزيزي دي الفنكشن اللي بتعمل الفورم وتعرضها بواسطة الشورت كود الل اتعمل في اخر سطر، طبعا واضح من الكود انه بسيط جدا حقلين فقط واحد للاسم والثاني لرقم الهاتف + زر للارسال مع مراعاة طبعا استخدام ob_start(); وتنظيفها قبل انهاء الفنكشن لتخزين المخرجات مؤقتا داخليا قبل ارسالها ماشرة للداتابيز، وعلشان تقدر تعرض الفورم ده في صفحة هتعمل صفحة جديدة في ووردبريس وتضيف فيها شورت كود [simple_form].. لحد هنا لو روحت على الصفحة وشوفت هتلاقي صفحة فيها فورم فيه حقلين اسم ورقم وفون وزر ارسال بس لو مليتهم ودوست مفيش اي حاجة هتحصل..
وده يخلينا نروح للنقطة رقم 4. حفظ البيانات المرسلة من الفورم السابق في الداتابيز.
أنت حاليا محتاج تعمل فنشكن تانية تهندل بيها الفورم ده أو بمعنى اصح تقوله لما يتم الضغط على زر الارسال ايه اللي هيحصل بالظبط، ببساطة هيتم حفظ البيانات في الجدول اللي انشأناه في الداتابيز يا عزيزي.. اتفضل الفنكشن وبعدها نناقشها
function sf_handle_form_submission()
{
global $wpdb;
if (isset($_POST['sf-submitted'])) {
$name = sanitize_text_field($_POST['sf-name']);
$phone = sanitize_text_field($_POST['sf-phone']);
$table_name = $wpdb->prefix . 'simple_form';
$wpdb->insert(
$table_name,
[
'name' => $name,
'phone' => $phone
]
);
echo "<p>Thanks for your submission!</p>";
}
}
add_action('init', 'sf_handle_form_submission');
الفنشكن بسيطة جدا اول حاجة اتصلنا بقاعدة البيانات بواسطة global $wpdb; بعدها استخدمنا function php الشهيرة اللي اسمها isset() وهي تحدد اذا كان تم عمل شيء ما وهنا اقوله اذا تم عمل ارسال للفورم if (isset($_POST['sf-submitted'])) { ابدأ تنفيذ الاتي وهو حفظ ماتم كتابته في حقل الاسم وحقل الفون في الجدول اللي اسمه simple_form وبعد الحفظ بنجاح اعرض رسالة Thanks for your submission! وأخيرا الفنكشن تعمل مع init أي مع تحميل الصفحة مباشرة بمعنى اصح تعمل دائما.
كده ببساطة لو روحت للصفحة اللي عملتها وضيفت فيها الشورت كود وجربت تضيف بيانات جديدة لاي شخص وتعمل Submit وبعدها روحت على الداتابيز بصيت هتلاقي البيانات اللي دخلتها اتحفظت بالفعل بنجاح في الداتابيز.. مبروك ❤
حلو كده عندنا الداتا محتاجين نعمل سيرش عليها بقى ونعرضها. وهنا نيجي للنقطة رقم 5. عمل فورم آخر للبحث عن البيانات التي تم تسجيلها من الفورم السابق في الداتابيز. + 6. إدراج فورم البحث هذا في صفحة آخرى وليكن اسمها Get Data أو الحصول على البيانات.
== وهنا ياعزيزي النقطتين دول هيكونوا في فنكشن واحدة بس بتعمل الفورم وفي نفس الوقت بتظهرك البيانات في شكل جدول.. شوف الكود وبعد كده نناقشه
function sf_search_shortcode()
{
ob_start();
?>
<form action="<?php echo esc_url($_SERVER['REQUEST_URI']); ?>" method="post">
<p>
Search by Phone Number: <br>
<input type="text" name="sf-search" pattern="[0-9]+" value="" required>
<input type="submit" name="sf-search-submitted" value="Search">
</p>
</form>
<?php
if (isset($_POST['sf-search-submitted'])) {
global $wpdb;
$phone = sanitize_text_field($_POST['sf-search']);
$table_name = $wpdb->prefix . 'simple_form';
$results = $wpdb->get_results($wpdb->prepare("SELECT id, name, phone, time FROM $table_name WHERE phone = %s", $phone));
if ($results) {
foreach ($results as $row) {
echo '<table>';
echo "<tr><th>ID</th><td>{$row->id}</td></tr>";
echo "<tr><th>Name</th><td>{$row->name}</td></tr>";
echo "<tr><th>Phone</th><td>{$row->phone}</td></tr>";
echo "<tr><th>Time</th><td>{$row->time}</td></tr>";
echo '</table>';
}
} else {
echo '<p>No results found.</p>';
}
}
return ob_get_clean();
}
add_shortcode('simple_form_search', 'sf_search_shortcode');
ببساطة هنا في البداية خالص عملنا فورم جديدة عبارة عن حقل واحد للبحث + زر ارسال، وبعدها استعلمنا باستخدام isset() برضه اذا كانت الفورم دي اتملت وتم إرسالها ام لا if (isset($_POST['sf-search-submitted'])) { وطبعا كالعادة بنتصل بالداتابيز لأننا هندور بداخلها وبعدها بناخد البيانات من حقل السيرش اللي هو رقم التليفون وبنروح على الداتابيز على الجدول بتاعنا اللي اسمه simple_form ونبحث بداخله في Column الفون اذا كان الرقم ده موجود اعرضلي باقي بيانات الRow كله في هيئة جدول، وطبعا استخدمنا الforeach علشان اجيب البيانات من نفس الrow واعرضها في الجدول واخيرا بقوله else يعني لو المدخلات مش موجودة في الداتابيز اعرض كلمة No results found. وطبعا الفنكشن دي كلها بتضيف في الاخر شورت كود [simple_form_search] الشورت كود ده لو استخدمته في اي صفحة هيتم وضع حقل السيرش فيها.
وده لينك البلاجين على Github لو محتاج تستخدمها
لمشاهدة هذا الجزء من المحتوى قم بالرد على المنشور أولا
وفي النهاية حابب اقول ان ده كود بدائي جدا وممكن يتعمل فيه شغل اكتر واحسن من كده بكتير سواء حماية أو تصميم أو شوية جافاسكريبت لعمل Validation بس ده يعتبر شرح بسيط لآلية العمل وانت اطلق عنانك
أسف للإطالة.. وبالتوفيق للجميع ❤
