وصف الموضوع

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

الأوسمة :
ajax| javascript| mail| PHP| مراسلة| أجاكس| استمارة| جافا سكريبت
في التصنيفات :PHP, جافا سكريبت

إذا أردت أن تضع وصلة للموضوع في موقعك أو في منتدى يمكنك استخدام الوصلة التالية .

الشفرة :
<a href="http://qatardr.net/class/957" rel="bookmark" > إنشاء استمارة مراسلة بواسطة أجاكس و php</a>

اضغطCtrl-C أو Apple-C  للنسخ

الوصلة ستظهر كالتالي :
إنشاء استمارة مراسلة بواسطة أجاكس و php

هذا الموضوع مرخص وفق ترخيص Creative Commons.[ معلومات إضافية حول الترخيص بالعربية]

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

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';
}

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

• اضفنا السطر الأول الدالة header للتأكد من عرض العربية بالشكل الصحيح .. اقرأ المزيد من هنا ..
• غيرنا السطر الأخير ليرد لنا كلمة 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

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

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

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

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

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

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

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

$("sendbutton").disabled =false;

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

خاتمة

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

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

• اضيف  في 5 أبريل 2008
• التعليقات : [ 7 تعليقات ]
• الزوار : [ 2,679 قارئ ]
• هذا الموضوع مرخص وفق ترخيص Creative Commons.[ معلومات إضافية حول الترخيص بالعربية]