السلام عليكم ورحمة الله و بركاته ....
بعد انقطاع دام عدة اشهر اعود للمشاركة فى منتدانا منتدى الفريق العربي للبرمجة
علما انني لم انقطع عن متابعة كل ماهو جديد في هذا المندى
اعود اليكم بسلسلة من الدروس و التي اتمنى ان تنال اعجابكم و تحوز على رضاكم وتخرجكم من دوامة السوال والجواب و التي كانت من اهم اسباب انسحاب عمالقة المنتدى من الاشراف و اولهم الاخ العزيز محمد ابو صلاح
اول الغيث قطرة واول الدروس كيفية صنع قوائم التصويت باستخدام ASP
مثل تلك القوائم موجودة في كثير من المواقع مثل موقع الجزيرة و غيرها ، و في اعتقادي فهي مهمة لكل صاحب موقع حيث تسمح له باخذ راي رواد موقعة عن تعديل معين في الموقع او اظافة منتدى للموقع على سبيل المثال .
ماذا نحتاج لصنع قوائم التصويت :
كل ما ستحتاجة هو ISS و access وبعض الدراية البسيطة بال ASP و التي عموما سوف اشرح كل ماستحتاجه منها فيما يلي كذالك فاننا سنستخدم بعض دوال JavaScript .
بعض التفاصيل :
1. افتح صفحة HTML جديدة و احفظها باسم first_page.htm ، سنسخدم هذه الصفحة للحصول على التصويت من الزوار .
2. سنسصنع صفحة اخرى وهي result.asp و التي مهمتها اخذ الاصوات و تخزينها في قاعدة البيانات و كذلك عرض النتائج .
3. سنفتح access ونصنع قاعدة البيانات.
4. سنحتاج الى صورة لتمثير مدى نسبة التصويت وهي مرفقة مع المقال هنا .
اولا صفحة first_page.htm
هذه الصفحة ستكون اول ما سيواجهه الزائر ، كود الصفحة مرفق في الاخير
شرح الكود :
الصفحة عادية بها الموضوع الذي سيتم التصويت علية و الاختيارات و امام كل اختيار (radio) ليتمكن الزائر من اختيار احد الاختارات و واحد فقط ثم يضغط على زر شارك و الذى سيفعل دالة JavaScript السماة go() و التي مهمتها ان تتاكد ان الزائر قد قام باختيار احد الاختيارت عن طريق if statement فاذا كان سيتم ارسال الفورم الى صفحة result.asp و الا لن يتم شيء (هنا يمكن ان نضيف رسالة للزائر تخبرة بضرورة الاختيار .
[ALIGN=LEFT]<INPUT TYPE="button" VALUE=" شارك" style="float: right" onClick="go();">[/ALIGN]
{
if (document.forms[0].elements[0].checked || document.forms[0].elements[1].checked || document.forms[0].elements[2].checked)
{
see_result();
document.forms[0].submit();
event.returnValue=true;
}
else
{
event.returnValue=false;
document.forms[0].reset();
}
}
function go()
لاحظ ان في بداية(if statement) يوجد استدعاء ل fanction اخر و هو see_result()
[ALIGN=LEFT]function see_result()
{
newwin = window.open('result.asp','result','width=600,height=150,left=50,top=80,resizable=0,toolbar=0,scrollbars=no')}[/ALIGN]باستخدام هذه الدالة يتم استدعاء صفحة result بذالك الشكل الصغير و من غير الزيادات العادية .
قاعدة البيانات :
قم بفتح access وفتح قاعدة بيانات جديدة و حفضها باي اسم و ليكن arab1.mdb في قاعدة البانات هذه قم ببناء جدول و ليكن تحت اسم POLL1 في هذاالجدول سنضع ثلاثة حقول وهي على عدد الخيارات لدينا و هي OPTION1 (number) و OPTION2(number) وOPTION3(number)
صفحة result.asp :
وهنا سيكون معضم العمل ، مهمة هذه الصفحة عرض النتائج و كذالك ادخال المشاركات الجديدة الي قاعدة البيانات .
1. سيتم الاتصال بقاعة البيانات :
conn.Open("driver={Microsoft Access Driver (*.mdb)};dbq=" & _
Server.MapPath("databasearab1.mdb"))
Set conn = CreateObject("ADODB.Connection")غير الجزء الاحمر حسب الحاجة .
2. استدعاء محتويات الجدول POLL1 :
[ALIGN=LEFT]strSQL = "select * from POLL1" set rs = conn.execute(strSQL)[/ALIGN]
3. و ضع محتويات الجدول في مصفوفة ليسهل التعامل معها
optionvalue(0) = rs.Fields(0)
optionvalue(1) = rs.Fields(1)
optionvalue(2) = rs.Fields(2)
dim optionvalue(2)
[/ALIGN]
4. استدعاء مشاركة الزائر فاذا كانت ليست فارغة اعني واحد من من الاختيارات تم اختياره يتم تجديد محتويات الجدول والى فان المستخدم يسعى فقط لمشاهدة النتائج لاغير .
if select_op ="OPTION1" then
optionvalue_insert = optionvalue(0) +1
sql_insert = "update POLL1 set OPTION1 = " & optionvalue_insert
conn.execute(sql_insert)
elseif select_op ="OPTION2" then
optionvalue_insert = optionvalue(1) +1
sql_insert = "update POLL1 set OPTION2 = " & optionvalue_insert
conn.execute(sql_insert)
elseif select_op ="OPTION3" then
optionvalue_insert = optionvalue(2) +1
sql_insert = "update POLL1 set OPTION3 = " & optionvalue_insert
conn.execute(sql_insert)
end if
optionvalue(0) = rs.Fields(0)
optionvalue(1) = rs.Fields(1)
optionvalue(2) = rs.Fields(2)
select_op = Request.Form ("r1")[/ALIGN]5.
حساب نسبة كل اختيار الي الاختيارة الاخري
total_vote = optionvalue(0)+optionvalue(1)+optionvalue(2)
dim percent(2)
percent(0) =(optionvalue(0)/total_vote) * 100
percent(1) = (optionvalue(1)/total_vote) * 100
percent(2) = (optionvalue(2)/total_vote) * 100
[/ALIGN]5.
عرض النتائج :
Response.write "<tr><p dir='rtl'>"
Response.write "<td><p dir='rtl'>%" & FormatNumber(percent(0),0) & "</td>"
Response.write "<td width=310><p dir='rtl'>[img=blue.gif]</td>"
Response.write "<td width=150><p dir='rtl'> بداية لتسوية حقيقية:</td>"
Response.write "</tr>"
Response.write "<tr><p dir='rtl'>"
Response.write "<td><p dir='rtl'>%" & FormatNumber(percent(1),0) & "</td>"
Response.write "<td width=310><p dir='rtl'>[img=blue.gif]</td>"
Response.write "<td width=150><p dir='rtl'> تكتيك مؤقت فقط:</td>"
Response.write "</tr>"
Response.write "<tr><p dir='rtl'>"
Response.write "<td><p dir='rtl'>%" & FormatNumber(percent(2),0) & "</td>"
Response.write "<td width=310><p dir='rtl'>[img=blue.gif]</td>"
Response.write "<td width=150><p dir='rtl'> اخرى:</td>"
Response.write "</tr>"
Response.write "</table></div>"
Response.write "<tr><p dir='rtl'>"
response.write "اجمالي الذين صوتوا: "&total_vote
Response.write "</tr>"
Response.write "<div align='right'><table border=0 cellpadding='0' cellspacing='0'>"
[/ALIGN]
الكود المستخدم مع الصور و الصفحات مدرج هنا .