Hide this notice

مرحبا أنت تستخدم انترنت اكسبلورر ٦ و هو متصفح اصدر في العام 2001 الا يبدو لك ذلك قديما .

نحن ننصحك بقوة بترقية متصفحك إلى نسخة أحدث مثل أنترنت اكسيلورر ٨ أو فايرفوكس و الذي سيتيح لك تصفح أفضل ليس لموقعنا فقط بل في كل أرجاء الأنترنت..

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

Post Pic

إنشاء استمارة مراسلة بواسطة أجاكس و php

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

ما سنحتاج إليه هو

  1. مكتبة بروتويب و التي يمكنك تحميلها من هنا و القراءة أكثر عنها من هنا .
  2. قراءة موضوع استقبال البيانات من إستمارة السابق في موقعنا لأننا سنقوم بالتعديل عليه .

التغيرات على php

سنجري بعض التغييرات على السكريبت من موضوع ( استقبال البيانات من إستمارة)


header("Content-Type: text/html;charset=windows-1256");

if($_SERVER['REQUEST_METHOD'] =='POST' && isset($_REQUEST['sendbutton']) ){
//التأكد من أن جميع البيانات كاملة ..
if(empty($_POST['yourname']) || empty($_POST['youremail']) || empty($_POST['yourcomment'])){
echo 'بيانات ناقصة .. فضلا أكمل جميع البيانات ..';
exit;
}
// التأكد من أن البريد الإلكتروني صحيح
if(!eregi("^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,3})$", $_POST['youremail'])) {
echo "البريد الإلكتروني غير صحيح..";
exit;
}
// جميع البيانات صحيحة تابع
$to_email = "youremail@somewhere.com"; // البريد الذي تريد الاستقبال عليه
// موضوع الرسالة
$subject = "رسالة من الموقع ..";
$headers = 'From: '.$_POST['youremail'] . "";
@mail($to_email, $subject, $_POST['yourcomment'], $headers);
echo 'ok';
}

غيرنا من البرنامج السابق ما يلي :

الhtml

ما سنقوم به هو تعديل شفرة الhtml من الموضوع السابق ووضع ID للإستمارة بحيث يصبح معرف الاستمارة كالتالي


<form method="POST" action="form.php" id="contactform" name="myform">

و السبب أننا إذا أردنا الوصول لمحتويات الاستمارة عن طريق الجافا سكريبت فيجب أن نحدد ID له لنتمكن من الوصول له .

و سنعدل على زر الإرسال بحيث عند الضغط عليه نستدعي دالة الجافا سكريبت التي ستقوم بعملية ارسال الإستمارة بواسطة أجاكس كما و سنحدد ID للزر لنستطيع لاحقا تعديل محتوياته و حالته و شكله عن طريق الجافا سكريبت


<input type="button" value="ارسل" name="sendbutton"  id="sendbutton"  onclick="sendcontactform()" />

عند الضغط على الزر سيتم استدعاء الدالة sendcontactform و التي سنكتبها لاحقا .و غيرنا نوع الزر بحيث يكون زر عادي بدلا من زر من نوع  submit حتى نمنع الانتقال لصفحة أخرى عند ضغط الزر .

سنضيف في أعلى الأستمارة قسم DIV فارغ و سنتخدمه لاحقا لعرض نتيجة العملية و سنعطيه المعرف contact_result


<div id="contact_result"></div>

القلب النابض .. الجافا سكريبت

أولا : يجب أن نتأكد من استدعاء ملف بروتوتيب Prototype.js في منطقة الرأس head في صفحتنا


<script type='text/javascript' src='prototype.js'></script>

ثانيا : سننشأ الدالة sendcontactform والتي يمكننا وضعها في منطقة الرأس و نضعها و بين الوسم script أو نضعها في ملف خارجي امتداده js و نستدعيه كما نستدعي ملف البروتوتيب prototype في الأعلى .


<script type="text/javascript">
function sendcontactform(){
var par= $('contactform').serialize();

$("sendbutton").disabled =true;
$("contact_result").innerHTML='جاري الإرسال ... فضلا انتظر ..';
new Ajax.Request('contact.php',
{
method:'post',
parameters: par,
onSuccess: function(transport){
var res = transport.responseText || "خلل : فضلا حاول مرة أخرى ";
if(res!='ok'){
$("contact_result").innerHTML=res;
}else{
$("contact_result").innerHTML='شكرا لك تم إرسال البيانات بنجاح ';
}
}
});

$("sendbutton").disabled =false;
}
</script>

لنقسم الشفرة


var par= $('contactform').serialize();

سنقوم باستخدام الدالة serialize و هي دالة من مكتبة Prototype تعمل على أخد بيانات الاستمارة و كتابتها بشكل مناسب .و نضغ البيانات كلها في المتغير par .


$("sendbutton").disabled =true;
$("contact_result").innerHTML='جاري الإرسال ... فضلا انتظر ..';

ثم قمنا بتعطيل زر الإرسال sendbutton بواسطة الخاصية Disabled و التي اعطيناها القيمة true أي ان الزر معطل بحيث نمنع المستخدم من الضغط على الزر إلا بعد انتهاء عملية المعالجة لتجنب الضغط أكثر من مرة على الزر .

و اظهر رسالة داخل contact_result لأخبار المستخدم بالانتظار من المهم عند استخدام الاجاكس اظهار ما يدل على أن البرنامج في طور التنفيذ للمستخدم و إلا فإن المستخدم قد يترك الصفحة أو يعتقد بوجود خلل ما .. يمكنك إعلامه بواسطة نص أو بواسط صورة متحركة .


new Ajax.Request('contact.php',
{
method:'post',
parameters: par,
onSuccess: function(transport){
var res = transport.responseText || "خلل : فضلا حاول مرة أخرى ";
if(res!='ok'){
$("contact_result").innerHTML=res;
}else{
$("contact_result").innerHTML='شكرا لك تم إرسال البيانات بنجاح ';
}
}
});

الدالة التالية Ajax.request خاصة أيضا بمكتبة Prototype لإنشاء دورة حياة أجاكس ( بداية – معالجة – نهاية) . الدالة هذه تأخذ متغيرين Url العنوان و Options الاختيارات

في الurl هو عنوان ملف الphp الذي سيقوم بمعالجة البيانات في حالتنا contact.php

في الاختيارات يمكننا تحديد الكثير من الأمور و لكننا هنا حددنا الاساسيات لاحظ أولا أننا احطنا الاخيارات بالقوسين { }

يمكنك الإطلاع على قائمة كاملة بالاختيارات الممكنه من موقع Prototype الرسمي .

قمنا بتحديد التالي :

  • Method : طريقة ارسال بيانات الاستمارة Post أو get بما انها استمارة كبيرة ببيانات كثيرة الافضل Post
  • parameters: المعطيات و هي بيانات الاستمارة التي حصلنا عليها في الاعلى عن طريق الدالة serialize
  • onSuccess : في حال نجاح العملية ابدأ الدالة التالية و التي تحتوي على المتغير الذي اخترنا له اسم transport ( يمكنك تحديد اي اسم تريد ) و transport هي نتيجة العملية.

var res = transport.responseText || "خلل : فضلا حاول مرة أخرى ";

وضعنا هذا السطر للتأكد من وجود نتيجة للعملية و وضع رسالة تلقائية لتظهر في حال حدوث خلل .

ثم سنقوم بأختبار الإجابة التي ارسلها السكريبت لو لم تكن Ok و تذكر أننا في البرنامج في حالة وجود خطأ طبعنا رسالة الخطأ أما في حالة تمام العملية طبعنا ok و انا استخدم هذه الطريقة لتسهيل عملية مقارنة النتائج في الجافا سكريبت .

لو لم تكن النتيجة مساوية لok اطبع النتيجة داخل contact_result اما لو كانت النتيجة ok اظهر رسالة شكر .


$("sendbutton").disabled =false;

بعد الانتهاء أعد الحياة لزر الارسال .

خاتمة

البرنامج السابق برنامج بسيط جدا يمكنك استخدامه كما هو كما يمكنك إضافة الكثير من التحسينات مثلا :

  • إضافة حقول إضافية
  • استخدام المزيد من الاختيارات options  مثلا onFailure لعرض رسالة أو إجراء تصرف آخر في حال فشل العملية .
  • إجراء المزيد من الإضافات الجمالية مثلا إضافة صورة متحركة عند بدء المعالجة ..

بقلم : فاطمة العمادي

أم و زوجة .. مصممة حرة و مصورة .. عرف الناس كتاباتي التقنية من خلال شخصية خيالية هي الدكتور نت . اصمم المواقع منذ العام ١٩٩٩م .

أوسمة : , , , , , , ,

تعليقات الزوار (9)

[+] أضف تعليقك من فضلك



  1. khalid كتب:

    الى كاتب الموضوع اول شي شكرا والله يكثر من أمثالك

    بعد المثل طبقته واستفد بس عندي بعض الأخطاء

    وشاكر لك كل هذا المجهود

    الله يرضالى عليك


  2. الأخ خالد حياك الله ..و إن شاء الله نكون عند حسن الظن دائما .


  3. امجاده كتب:

    اشكرك ياعزيزي دكتور نت على الموضوع القيم بصراحه كنت ابحث عن هذا الدرس كثير وشكرا

    http://www.amgadh.com/vb


  4. امجاده كتب:

    انا في انتظار جديدك يادكتور نت


  5. امجاده :
    شكرا و بالتوفيق إن شاء الله .


  6. السلام عليكم و رحمة اللــــــــــــــــــه ،
    بارك الله فيكم على هذا الموقع المفيد في تصميم المواقع .


  7. flflh كتب:

    اخي دكتور نت بارك الله فيك استفدت كثيرا من مدونتك

    وإن شاء الله اكون تلميذا نجيبا في البي اتش بي

    لكنني اود ان أتسائل

    حول انشاء صفحة جمع بيانات بحقول معينة يتم إعداداها من قبلي

    وتحفظ البيانات في قاعدة بيانات يمكن الدخول على البيانات وعمل فرز للمدخلات

    حسب كل حقل أرغب فيه

    فما الخطوات الصحيحة لذلك .. شكرا لجهودك