فورم بريدي
يتساءل الكثيرون عن طريقة إنشاء برنامج مراسلة أو يستخدمون برامج جاهزة ربما لا تلبي مطالبهم بشكل وافي وكامل. حسناً سيكون هذا من اليوم وصاعداً من الماضي.. لأننا سنتعلم سوياً طريقة إنشاء برنامج مراسله متقدم جدا ومرن جدا وبكل سهوله وسرعه.
أياً كان ما نريده في برنامج المراسلة سنقوم بعمله في صفحه واحده فقط ولنقم بإنشائها في احد برامج التصميم مثل الفرونت بيج أو الدريم ويفر أو شبيهاتها وإن كنت دائماً أفضل كتابة كود التصميم يدوياً في احد برامج التحرير كبرنامج EditPlus
سأضع هنا كود صفحة لبرنامج مراسلة كتبته كمثال وحاولت أن ادرج فيه أشكال وأنواع مختلفة من الحقول حتى يتضح المثال ويبقى الخيار لكم مفتوح بعد ذلك لما تريدونه انتم. وقد حفظت الصفحة تحت أسم mail.htm
كود:
<head>
<**** ***********="Content-Language" content="ar-sa">
<**** ***********="Content-Type" content="text/html; charset=windows-1256">
<title>راسلنا</title>
<!-- CSS Stylesheet -->
<style type="text/css">
<!--
p {
margin-top: 0;
margin-bottom: 0;
font-size: 12pt;
font-family: Tahoma;
color: #800000;
}
form {
text-align: center;
font-size: 12pt;
font-family: Tahoma;
color: #000080;
vertical-align: middle;
}
box {
border: 1px solid #000080;
padding: 0;
}
-->
</style>
<!-- / CSS Stylesheet -->
</head>
<body>
<p align="center">لارسال ملاحظتك الينا قم بتعبئة البيانات ثم الضغط على زر الإرسال</p>
<form method="POST" action="send.php">
الإسم :<input type="text" name="name" size="40" class="box">العمر :<input type="text" name="age" size="2">
<br />
المرحلة الدراسية: <select size="1" name="level" class="box">
<option value="الإبتدائية">الإبتدائية</option>
<option value="المتوسطة">المتوسطة</option>
<option value="الثانوية">الثانوية</option>
<option value="الجامعة">الجامعة</option>
</select>
ملاحظتك تختص بـ: <select size="1" name="to" class="box">
</select>
<br />
الملاحظة : <textarea rows="5" name="note" cols="40" class="box">your note here.</textarea>
<br />
بريدك الإلكتروني : <input type="text" name="email" size="45" class="box">
<br />
<input type="submit" value="إرسال" name="Submit" class="box">
<input type="reset" value="مسح" name="Reset" class="box">
</form>
</body>
</html>
بالطبع بدأنا بوسم html وحددنا اتجاه الصفحة من اليمين لليسار ثم أدخلنا وسم head وبداخله أوضحنا لغة الصفحة وهنا كانت العربية السعودية وأيضا وضعنا نوع الترميز والمعروف أن اللغة العربية دائما ما يكون ترميزها 1256 لويندوز وبعده وضعنا أسم الصفحة داخل الوسم title ثم أدرجنا وسم style وفيه قمنا بكتابة ثلاثة وسوم وهي P و Form و Box وحددنا لكل واحد منهم تصميمه الخاص فيه .
ننتقل الآن لما هو أهم وهو جسم الصفحة أو الوسم Body وفيه قمنا بإدراج فورم المراسلة بحقوله المختلفة
يكتب وسم الفورم كالآتي :
كود:
<form method="POST" action="send.php">
الأكشن action هنا هو عبارة عن الحدث الذي يحدث عند الإرسال وهنا وضعناه الذهاب لصفحه اسمها send.php وسيأتي الحديث عنها لاحقاً أما الميثود method فهو نوعان احدهما get والآخر post والفرق بسيط فالأول عند إرسال البيانات أي عند عملية الانتقال فأنه يقوم بنقل البيانات المدخلة للفورم من خلال العنوان أو الرابط أما الآخر (post) فهو يحفظ البيانات المدخلة في الخلفية ويقوم بالإرسال أو الانتقال للصفحة التالية (أتمنى أن يكون هذا المختصر واضح وإلا أعدنا الشرح بصوره موسعه )
بداخل وسم الفورم يتم إدراج ما نريده من حقول كالأتي :
كود:
الاسم :<input type="text" name="name" size="40" class="box">
هذا الحقل هو حقل نصي (type="text") واسمه name (name="name") وحجمه 40حرف ويأخذ تصميمه من الوسم Box والذي سبق وتحدثنا عنه بالطبع من الممكن وضعه بدون تصميم وسيكون كالآتي :
كود:
الإسم :<input type="text" name="name" size="40">
ثم لدينا حقل العمر
كود:
العمر :<input type="text" name="age" size="2">
وهو تقريباً مشابه الإ أن حجمه عبارة عن خانتين فقط وهذا مناسب فلا يمكن أن يكون عمر إنسان أكثر من 99 ويستخدم الإنترنت
ثم لدينا حقل المرحلة الدراسية
كود:
المرحلة الدراسية: <select size="1" name="level" class="box">
<option value="الإبتدائية">الإبتدائية</option>
<option value="المتوسطة">المتوسطة</option>
<option value="الثانوية">الثانوية</option>
<option value="الجامعة">الجامعة</option>
</select>
وقد اسمينا هذا الحقل level ووضعنا فيه عدة خيارات هنا أحب أن أشير بأن لكم الحريه في عدد الخيارات فكل ما اضفت سطر زادت الخيارات ونموذج الخيار الإضافي كالتالي :
كود:
<option value="XXX">OOO</option>
XXX وتعني القيمه الفعليه لهذا الخيار
OOO وتعني القيمة الظاهره في الصفحه لهذا الخيار
وهذا يتضح في الحقل الذي اسميناه TO وهو الحقل التالي في نموذجنا
كود:
ملاحظتك تختص بـ: <select size="1" name="to" class="box">
</select>
بعد ذلك أستخدمنا حقل مختلف قليلاً فهو من نوع textarea وهذا النوع الملائم ليأخذ نصوص طويله ويتحدد حجمه بعدد الاسطر او الصفوف وعدد الأحرف في السطر وهنا وضعنا الأسطر خمس اسطر (rows="5") وعدد الأخرف في السطر اربعون حرفاً (cols="40") ولا تنس أننا أسميناه (name="note")
كود:
الملاحظة : <textarea rows="5" name="note" cols="40" class="box">your note here.</textarea>
في هذا الحقل وضعنا قيمه ظاهره وهي (your note here.) والتي ستظهر لزائر الصفحه داخل هذا المربع ولكن بالطبع له حرية التصرف فهو يستطيع مسح هذه العباره الظاهره وكتابة ما يريده هو
فيما قبل الآخير وضعنا الحقل الخاص بالبريد الالكتروني الخاص بالزائر لكي يتم مراسلته عن طريقه في حال أرنا الكتابه اليه
كود:
بريدك الإلكتروني : <input type="text" name="email" size="45" class="box">
لا يختلف كثيراً عن السابقات الإ بأمر واحد فقط سأترككم تكتشفونه انتم.
أخيراً يأتي زر الإرسال وزر مسح الحقول المدخلة
كود:
<input type="submit" value="إرسال" name="Submit" class="box">
<input type="reset" value="مسح" name="Reset" class="box">
بالطبع لكل منهما نوعه الخاص فنوع زر الإرسال دائماً ما يكون submit أما نوع زر الإلغاء فهو reset وطبعا وضعنا قيمة الزر باللغه العربية
بهذا نكون انتهينا من الملف الأول وهو الملف الخاص بالتصميم وإظهار النموذج البريدي بشكله الحالي ولرؤية مثال على ما قمنا به توجه الى الرابط التالي :
http://www.pcocean.net.sa/dorarr.ws/mail.htm
مارأيك ؟
جميله نعم
أيظاً لديك كل الحق فهي صفحه جامده وإن ضغطت على زر الارسال تنقلك الى رابط خطأ ولا تقوم بعملها المراد منها وهو الإرسال الى البريد.
حسناً .. للتوضيح ما قمنا به هو تصميم البرنامج ولكن بلغة HTML وهي لغة عرض فقط وليست لغه تقاعلية فهي لا تفهم ماهو المراد منها وإن سألتني ما العمل وكيف نقوم بإلارسال ؟ فساجيبك بالتالي :
يجب كتابة كود برمجي بإحدى اللغات التفاعلية يشرح للموقع بأننا نريد ارسال المدخلات التي بهذا النموذج على البريد الإلكتروني وسأقوم بذلك هنا فأنتبه معي للكود البرمجي وستفهم المراد بإذن الله
بداية اخترت لغة php للبرنامج لذلك سأقوم بفتح المفكره أو برنامجي المفضل EditPlus وسأنشيء ملف جديد من نوع PHP وسيكون إسمه send ليظهر أخيراً كالتالي : send.php
داخل الملف يكون هذا الكود الذي سأشرحه بعد قليل :
كود:
$subject="ملاحظة" ;
$message="
<html>
<body>
<p>
السلام عليكم
<br />
هذه الرسالة تصلك من : '$name'
<br />
والبالغ من العمر : '$age'
<br />
ومرحلته الدراسية هي : '$level'
<br />
وبريدة الإلكتروني هو : '$email'
<br />
له ملاحظه مفادها هو : '$note'
</p>
</body>
</html>
";
$header="From: $name <$email> \n".
"Reply-To: $email \n".
"MIME-Version : 1.0 \n".
"Content-type: text/html ; charset=windows-1256 \n".
"Content-Language: ar-sa";
mail($to,$subject,$message,$header);
echo "لقد تم الارسال";
?>
دأئما ما يبدأ الكود البرمجي في لغة PHP بالتالي :
بعد ذلك وضعنا متغير اسمه subject وقيمته كانت كلمة ( ملاحظة )
بعد ذلك وضعنا متغير اسمه message وقيمته كانت صفحة html محتواها التالي :
كود:
السلام عليكم
<br />
هذه الرسالة تصلك من : '$name'
<br />
والبالغ من العمر : '$age'
<br />
ومرحلته الدراسية هي : '$level'
<br />
وبريدة الإلكتروني هو : '$email'
<br />
له ملاحظه مفادها هو : '$note'
والمتغيرات التي بداخل هذه الصفحه هي القيم الفعلية وليست الظاهره في نموذجنا السابق وعند تركيزك ستجد ان المتغير هنا هو عباره عن اسم الحقل في النموذج السابق مسبوق بعلامة الدولار $ وهي العلامه التي تخبر البرنامج ان هذه الكلمه تحمل متغيراً قيمته في الحقل الذي في النوذج السابق والذي اسمه يحمل اسم المتغير وكمثال على ذلك :
المتغير $name هو المتغير الذي يحمل قيمة الحقل الذي اسمه name في النوذج السابق ( الأسم )
بعد ذلك وضعنا متغير اسمه header وقيمته كانت قيمه ثابته في لغة PHP وسيأتي توضيحها
بعد ذلك وضعنا دالة mail وهي أهم ما بالبرنامج وهب الداله التي وضيفتها الأساسية الإرسال من خلال لغة PHP الى البريد الإلكتروني وكانت كالتالي :
كود:
mail($to,$subject,$message,$header);
ولو حاولت كتابتها بالعربية حتى يتضح معناها وطريقة عملها فقط فستكون كالتالي :
إرسال بريد ( بريد المستقبل ، عنوان الرسالة ، محتوى الرسالة ، نوع الرسالة );
وهنا سأعود الى متغير header فهذا المتغير هو الذي يحدد نوع الرساله فرسالتنا هنا عباره عن صفحة html فكان لابد ان يكون محتوى المتغير كالاتي :
كود:
$header="From: $name <$email> \n".
كود:
"Reply-To: $email \n".
"MIME-Version : 1.0 \n".
"Content-type: text/html ; charset=windows-1256 \n".
"Content-Language: ar-sa";
حسناً بهذا الترتيب سنكون أوضحنا للبرنامج الخطوات التالية :
تعريف المتغير subject
ثم تعريف المتغير message
ثم تعريف المتغير header
ثم وضعنا للبرنامج امر الإرسال الى البريد ولاحظ أننا لم نقم بتعريف المتغير to وذلك لأنه سيأخذ قيمته الفعلية من خلال حقل to الذي وضعناه داخل نموذج الإرسال
من المفترض بعد ذلك أن يقوم البرنامج في حال لم يصادف أي خطأ ان بكتابة كلمة تم الإرسال او أي عبارة شكر للمرسل وذلك يتم من خلال الأمر echo وهنا قد كتبنا الآتي
echo "لقد تم الارسال";
بعد ذلك أغلقنا الكود البرمجي للغة PHP بالتالي :
?>
حسناً الآن أصبح لدينا ملفين أحدهما اسمه mail.htm وبداخله نموذج الإرسال والذي بالضغط على حقل الإرسال ستنتقل القيم التي وضعناها بخاصية POST الى ملف send.php (وهنا تتضح الأسباب وراء وضعنا هذه القيم في السابق) والذي بدوره يأخذ هذه القيم ويقوم بإرسالها الى البريد الإلكتروني .
بعد أن رفعنا الملف send.php بجانب mail.htm عليك بإعادة التجربه لبرنامجنا :
http://www.pcocean.net.sa/dorarr.ws/form/mail.htm
الآن دورك .. قم برفع الملفين إلى موقعك وضعهما في نفس المجلد ومبروك فقد أصبح لديك برنامج مراسلة ( فورم بريدي ) من صنع يديك مرن جدا وجميل جدا وسهل جداً وعبارة عن ملفين اثنين فقط دون تعقيد والأجمل من كل هذا انه يقوم بالإرسال إلى البريد بصيغة صفحة html
أتمنى أن يكون الشرح سهل وبسيط وأن تستفيدوا منه
تحياتي..